You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TypeScript中能否使用keyof实现对象更新?value类型如何定义?

TypeScript中使用keyof实现对象属性更新的相关说明

可行性结论

完全可行。keyof是TypeScript原生提供的类型操作符,作用是获取某个类型的所有公共属性名组成的联合类型,天生适合做对象属性访问、更新的类型约束。

原代码问题与类型补全

原代码存在两个需要修正的问题:

  • 自定义接口命名为Object,和TypeScript全局内置的Object类型重名,会引发不可预期的类型冲突,建议替换为自定义名称(例如Person)。
  • 初始声明的obj是空对象,没有指定对应接口类型,不符合TS的类型校验规则,需要补充类型标注与合法初始值。

关于???位置的value类型,有两种可选写法:

  • 基础写法:直接写Person[keyof Person],也就是该接口所有属性值类型组成的联合类型(本例中是string | number),但这种写法无法校验key和value的对应关系,存在类型漏洞。
  • 推荐写法:给函数增加泛型约束,通过索引访问类型Person[K]让value类型自动匹配传入key对应的属性类型,实现严格的类型安全。

完整可运行示例代码

// 自定义业务接口,避免和内置类型重名
interface Person {
  name: string
  age: number
}

// 给obj明确标注类型,初始值符合接口约束
let obj: Person = {
  name: "",
  age: 0
}

// 泛型实现严格类型校验
function updateObject<K extends keyof Person>(key: K, value: Person[K]) {
  obj[key] = value;
}

// 调用示例
updateObject("name", "李四") // 校验通过,name对应string类型
updateObject("age", 20) // 校验通过,age对应number类型
// updateObject("age", "二十") // TS报错,age属性不接受字符串值
// updateObject("address", "XX街道") // TS报错,address不存在于Person接口中

内容的提问来源于stack exchange,提问作者Terriermon

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 04:54:36