TypeScript中使用变量属性名更新对象值出现类型错误的解决方法

问题原因 #

你的updateDate方法中，column参数是keyof TaskItem，可能指向id（number类型）或myDate（string类型）。当直接给row[column]赋值string类型的date时，TypeScript无法确保date类型和column对应的属性类型匹配，因此将row[column]的类型推断为never，导致赋值报错。

严谨解决方法 #

使用泛型约束column和date的类型关联，确保传入的date类型与目标属性的类型完全匹配：

export interface TaskItem {
  id: number,
  myDate: string
}

updateDate<K extends keyof TaskItem>(row: TaskItem, column: K, date: TaskItem[K]) {
  row[column] = date;
}

调用示例 #

// 正确：myDate对应string类型
updateDate(rowItem, 'myDate', '2022-02-20');
// 正确：id对应number类型
updateDate(rowItem, 'id', 123);
// 错误：类型不匹配，会触发TypeScript报错
updateDate(rowItem, 'id', '123');

原理说明 #

泛型K限定为TaskItem的键名，TaskItem[K]会动态获取该键对应的属性类型。这样TypeScript能在编译期就校验date的类型是否与目标属性一致，既保留了类型约束，又避免了any带来的类型安全问题。

内容的提问来源于stack exchange，提问作者Misko Jones