如何在TypeScript中根据value类型推导onChange的参数类型？

当然可以实现，核心是用泛型将value的类型和onChange的参数类型绑定，让TypeScript自动根据传入的value推断出onChange的参数类型。

解决方案代码 #

// 定义泛型Props，让T与value、onChange的参数类型绑定
type Props<T extends string | number | boolean> = {
  value: T;
  onChange: (val: T) => void;
};

const handleOnChange = (val: string) => {
  console.log(val);
};

// 显式指定泛型类型，TypeScript会严格约束onChange参数
const componentProps: Props<string> = {
  value: 'this is a string',
  onChange: (value) => handleOnChange(value) // 无类型错误，无需断言
};

// 也可以省略泛型参数，让TypeScript自动推断
const numberProps = {
  value: 123,
  onChange: (val) => console.log(val.toFixed(2)) // val自动推断为number类型
};

方案说明 #

1. 泛型T被约束为string | number | boolean，确保只能传入这三种合法类型的value；
2. value的类型与onChange的参数类型都绑定到T，实现了两者的强关联；
3. 当传入具体的value值时，TypeScript会自动推断出T的具体类型，从而精准收窄onChange的参数类型，彻底避免手动类型断言的需求。

原写法的问题 #

原来的Props中，value和onChange的参数是独立的联合类型，TypeScript无法建立两者的关联关系，因此只能认为onChange的参数可能是三种类型中的任意一种，必须手动断言才能调用对应类型的方法。

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