TypeScript函数接受string或自定义类型时赋值报错的解决方法

问题本质 #

这是TypeScript函数参数逆变规则导致的错误。你定义的(value: string | CustomType) => void类型要求函数能处理string和CustomType两种参数，但如果传入的函数仅支持其中一种类型，TypeScript会判定它不满足要求——因为当该函数被调用时，可能传入另一种它无法处理的参数类型。

举个典型的错误示例：

type CustomType = { id: number };
type PressHandler = (value: string | CustomType) => void;

// 仅接受string的函数
const handleString = (value: string) => console.log(value);
// 仅接受CustomType的函数
const handleCustom = (value: CustomType) => console.log(value.id);

// 此处报错：handleString无法处理CustomType类型参数
const onPress: PressHandler = handleString;

可行解决方案 #

1. 让函数兼容联合类型参数 #

修改传入的函数，使其能处理两种类型的参数，通过类型守卫区分逻辑：

type CustomType = { id: number };

const handlePress = (value: string | CustomType) => {
  if (typeof value === 'string') {
    console.log('处理字符串:', value);
  } else {
    console.log('处理CustomType:', value.id);
  }
};

const onPress: (value: string | CustomType) => void = handlePress; // 编译通过

2. 将函数类型定义为函数联合 #

如果确实需要允许传入仅处理单一类型的函数，把onPress的类型改为函数的联合类型，而非参数的联合：

type CustomType = { id: number };
type PressHandler = ((value: string) => void) | ((value: CustomType) => void);

const handleString = (value: string) => console.log(value);
const handleCustom = (value: CustomType) => console.log(value.id);

// 两种函数均可正常赋值
const onPress1: PressHandler = handleString;
const onPress2: PressHandler = handleCustom;

注意：这种定义下，调用onPress时TypeScript会要求传入同时满足两种参数类型的值（通常是string & CustomType，几乎不存在），因此仅适用于你明确知道调用时参数类型的场景。

3. 使用泛型绑定参数类型 #

如果需要严格绑定函数的参数类型，用泛型定义函数类型：

type CustomType = { id: number };
type PressHandler<T extends string | CustomType> = (value: T) => void;

const handleString = (value: string) => console.log(value);
const handleCustom = (value: CustomType) => console.log(value.id);

// 明确指定泛型类型
const onPress1: PressHandler<string> = handleString;
const onPress2: PressHandler<CustomType> = handleCustom;

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