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

如何编写onValueChange函数让TypeScript自动推断val的对应类型(无需as number)

解决方案

要实现这个需求,核心是用泛型把field和val的类型绑定起来,让TypeScript能根据传入的字段名自动推断对应的值类型,替代原本宽泛的联合类型约束。

修改后的代码如下:

interface IRow {
  age: number;
  name: string;
  born: Date;
  isGood: boolean;
}

const state: IRow = {
  age: 5,
  name: 'bob',
  born: new Date(),
  isGood: true
}

// 用泛型K约束field为IRow的具体键,val对应IRow[K]的类型
const onValueChange = <K extends keyof IRow>(field: K) => (val: IRow[K]) => {
  if (field === 'age') {
    const someNumber = 2 * val; // 此时val被自动推断为number,无类型错误
    state[field] = val; // 类型完全匹配,无赋值错误
  }
}

onValueChange('age')(5); // 正确,val必须传入number类型
onValueChange('name')('alice'); // 正确,val必须传入string类型
onValueChange('born')(new Date()); // 正确
onValueChange('isGood')(false); // 正确

原理说明

  • 泛型K extends keyof IRow限定了field是IRow的某一个具体键,而非所有键的联合类型。
  • 当调用onValueChange('age')时,TypeScript会自动将泛型K推断为'age',后续的val类型就会被约束为IRow['age'](也就是number)。
  • 在if (field === 'age')的分支里,TypeScript通过类型收窄机制,确认当前val的类型是number,无需额外的类型断言。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.18 02:55:19