TypeScript泛型兼容报错：T继承A|B却提示可实例化不同子类型

这个报错的核心是函数参数的逆变特性，你对泛型约束和函数类型兼容性的理解存在一个关键误区：

为什么会报错？ #

当你定义T extends A | B时，T可以是A、B或者A|B本身。但函数类型的兼容性遵循逆变规则：如果函数X能接受类型U，函数Y能接受类型V，只有当U是V的子类型时，Y才能赋值给X（反过来不成立）。

放到你的场景里：

• SomeOtherComponent的onChange要求能处理所有A|B类型的值
• 你的changeHandler只能处理特定子类型T的值（比如当T被实例化为A时，它只能接收A，无法处理B）

TypeScript会预判到这种风险：如果有人用MyComponent<A>，此时changeHandler只能处理A，但SomeOtherComponent可能会传入B类型的值，这会导致运行时错误，所以提前抛出了类型不兼容的报错。

解决方法 #

根据你的需求，有几种可行的方案：

1. 放宽changeHandler的参数类型
   直接把changeHandler的参数改为A|B，让它能处理所有合法输入，这样就和onChange的类型完全匹配：

   type MyComponentProps<T extends A | B> = {
     value: T;
     changeHandler: (value: A | B) => void;
   };
   

2. 使用类型断言（谨慎使用）
   如果你能确保changeHandler在实际运行中永远只会收到T类型的值，可以用断言跳过类型检查，但这会丢失TypeScript的类型保护：

   return <SomeOtherComponent onChange={props.changeHandler as (value: A | B) => void} />;
   

3. 调整泛型设计
   如果MyComponent不需要严格绑定changeHandler到T，可以给SomeOtherComponent也加上泛型，让两者的类型保持一致：

   type SomeOtherComponentProps<T extends A | B> = {
     onChange: (value: T) => void;
   };
   const SomeOtherComponent = <T extends A | B>(props: SomeOtherComponentProps<T>) => null;
   
   const MyComponent = <T extends A | B>(props: MyComponentProps<T>) => {
     return <SomeOtherComponent<T> onChange={props.changeHandler} />;
   };
   

总结 #

你之前误以为T extends A|B就能让(value:T)=>void兼容(value:A|B)=>void，但函数参数的逆变规则决定了：接受窄类型的函数不能赋值给接受宽类型的函数，因为窄类型函数无法处理宽类型的所有可能输入。TypeScript的报错其实是在帮你规避潜在的运行时类型错误。

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