TypeScript如何实现接收键key和新值更新对象指定字段的方法

你当前代码的类型报错核心是key与value的类型未做关联绑定。key: keyof SomeObject和value: SomeObject[keyof SomeObject]均为联合类型，TypeScript无法保证二者的对应关系，比如允许传入key="key1"且value=123的不符合实际字段类型的入参，因此赋值操作会触发类型校验失败。

修正方案 #

通过泛型约束关联key和value的类型，修改setValue方法定义即可，完整代码如下：

interface SomeObject {
  key1: string;
  key2: number;
  key3: boolean;
}

class SomeClass {
  public fields: {
    [field in keyof SomeObject]: SomeObject[field];
  };

  constructor() {
    this.fields = {
      key1: "",
      key2: 123,
      key3: false,
    };
  }

  // 新增泛型约束关联key和value类型
  setValue = <K extends keyof SomeObject>(
    key: K,
    value: SomeObject[K],
  ): void => {
    this.fields[key] = value;
  };
}

方案说明 #

泛型参数K会自动捕获传入的key的具体类型，value的类型会被约束为该key对应的SomeObject字段类型，确保二者类型严格匹配，即可解决赋值时的类型报错问题，同时调用方法时也会有对应的类型提示和校验。

内容的提问来源于stack exchange，提问作者Святослав Марюха