TypeScript箭头函数类型收窄与普通变量行为不一致问题咨询

为什么变量和函数的类型赋值行为不同？ #

普通变量的类型赋值遵循协变规则：当a的类型是string | number | boolean（父类型），b是string（子类型），把b赋值给a是安全的——因为string属于联合类型的一部分，a可以容纳b的所有可能值。

但函数的参数类型遵循逆变规则：如果a的函数要求接受string | number | boolean类型的参数，意味着调用a时可能传入number或boolean；而b的函数仅接受string，若把b赋值给a，当a被传入非string参数时，b内部的indexOf会直接报错（因为indexOf仅支持string类型参数）。TypeScript的报错正是为了阻止这种不安全的赋值行为。

解决React场景的实际问题 #

你需要让函数签名符合组件Props的要求，同时在函数内部保证参数是string类型以避免indexOf报错，以下是几种可行方案：

1. 内部添加类型守卫（推荐） #

在函数内部通过类型判断收窄参数范围，既满足组件Props的函数签名要求，又保证逻辑安全：

// 符合组件Props要求的函数签名
const handleCallback = (arg: string | number | boolean, record: { name: string }) => {
  // 仅当arg是string时执行indexOf逻辑
  if (typeof arg === 'string') {
    return record.name.indexOf(arg) === 0;
  }
  // 处理非string类型的情况，返回合理默认值
  return false;
};

// 直接赋值给组件Props无报错
<MyComponent onSomething={handleCallback} />

2. 类型断言（谨慎使用） #

如果你能100%确认组件实际只会传入string类型参数，可以用类型断言跳过TypeScript的检查，但会失去类型安全保障：

const handleCallback = (arg: string, record: { name: string }) => 
  record.name.indexOf(arg) === 0;

// 断言为组件要求的函数类型
<MyComponent onSomething={handleCallback as (arg: string | number | boolean, record: { name: string }) => boolean} />

3. 调整组件Props类型（如果可行） #

如果你有权修改组件的Props定义，或组件实际确实只会传入string，可以直接修改函数参数类型，从根源上解决类型不匹配问题：

// 修改组件Props的函数签名
interface MyComponentProps {
  onSomething: (arg: string, record: { name: string }) => boolean;
}

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