如何在React-select中实现TypeScript类型安全的onChange事件？

为什么没检测出预期错误？ #

• 你没有给changeHandler的第一个参数value添加显式类型标注，TypeScript会将其推断为any类型。any类型会绕过所有类型检查，所以传给action时不会触发参数类型/数量的错误提示。
• 大概率你的TypeScript配置未开启严格模式（strict: true），严格模式会禁用隐式any，强制变量必须有明确类型，从根源避免这类问题。

正确代码写法 #

首先确保你的tsconfig.json开启严格模式：

{
  "compilerOptions": {
    "strict": true,
    // 其他编译配置...
  }
}

然后修正component.tsx中的代码，给value添加符合业务场景的类型标注（比如Select组件返回的value类型通常是string或number，这里假设是string，请根据实际情况调整）：

import { AnActionType } from './action';

const changeHandler = (value: string, action: AnActionType) => {
  action(value); // 编译器报错：类型'string'不能赋值给参数类型'number'
  action(value, 1); // 编译器报错：类型'number'不能赋值给参数类型'string | undefined'
}

<Select onChange={value => changeHandler(value, action)} />

补充说明 #

如果你的Select组件返回的value确实是number类型，只需把value: string改成value: number即可。此时action(value)不会因为参数数量报错（因为第二个参数是可选的），但action(value, 1)依然会因为第二个参数类型不匹配报错——如果需要强制调用时必须传入第二个参数，只需把AnActionType中的value?: string改成value: string即可。

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