打字稿 | 仅允许传递满足传递键类型的值

Question

让我解释一下我想要实现的目标以及问题所在。我有以下界面：interface ExampleInterface {  a: string;  b: number;}我有以下实现我的变量ExampleInterface：const exampleVariable: ExampleInterface = {  a: 'hello world',  b: 0,}我有以下函数必须修改我的exampleVariable，这个函数有两个参数，第一个参数必须是一个键exampleVariable，第二个参数必须是一个新值，我想分配给给定的键（传递为第一个参数）：const setState = (key, value) => {  exampleVariable[key] = value;}我想要实现的是：我想确保如果我传递一个等于的键作为a第一个参数，那么 Typescript 不会让我传递除类型值之外的任何内容，string因为内部ExampleInterface类型a等于string。我试图做什么：我尝试为我的函数参数添加以下类型：const setState = (key: keyof ExampleInterface, value: ExampleInterface[keyof ExampleInterface]) => {  exampleVariable[key] = value;}但我不断收到以下 Typescript 错误：Type 'ExampleInterface[keyof ExampleInterface]' is not assignable to type 'string & number'.  Type 'string' is not assignable to type 'string & number'.    Type 'string' is not assignable to type 'number'.ts(2322)我假设函数参数的类型设置不正确。任何建议表示赞赏。谢谢。

Answer 1

该错误是因为您将 key 参数指定为 ExampleInterface 的键，并且它有 2 种数据类型，即字符串和数字。KeyOf 将两种数据类型都应用于传递的变量，这违反了分配数据类型的规则。因此，当您将类型扩展并应用到它映射到键的正确类型的值时，您可以将 keyOf 扩展为泛型。

以下是您的代码的修复。

 setState<K extends keyof ExampleInterface>(key: K, value: ExampleInterface[K]){

    this.exampleVariable[key] = value;

  }

但是您可以重写代码以设置泛型类型的值，下面是示例。

setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {

    obj[key] = value;

  }

Answer 2

我想这就是你要找的：

interface ExampleInterface {

  [key: string]: number;

}

const exampleVariable: ExampleInterface = {

  ['hello world'] : 0,

}

console.log(exampleVariable)

const setState = (key: string, value: number) => {

  exampleVariable[key] = value;

}

setState('hello world', 1);

console.log(exampleVariable)

查看索引签名以便更好地理解。

如果在setState中你想通过接口引用接口类型，这也是有效的：

const setState = (keyArg: keyof ExampleInterface, value: ExampleInterface['key']) => {

  exampleVariable[keyArg] = value;

}

那就是您接近的语法。