javascript - typescript |仅允许传递满足传递键类型的值

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;
  }

引用:TypeScript:Handbook