如何修复TS2322错误：React Native泛型组件unknown子类型不兼容问题

问题 #

封装React Native泛型组件并对外暴露相同泛型类型时，遇到TypeScript错误：

'unknown' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'unknown'.

涉及代码 #

Dropdown.tsx

export type DropdownProps<S> = {
  itemText?: (item: S) => string;
};

const Dropdown = <S extends unknown>(props: DropdownProps<S>) => {
  // 组件内部逻辑
};

DropdownWrapper.tsx

export type DropdownWrapperProps<T> = {
  name: string;
} & DropdownProps<T>;

const DropdownWrapper = <T extends unknown>(
  props: DropdownWrapperProps<T>,
) => {
  const { name, ...rest } = props;

  return (
    <>
      {/* 其他UI逻辑 */}
      <Dropdown {...rest} /> {/* 错误触发位置 */}
      {/* 其他UI逻辑 */}
    </>
  );
};

完整错误信息 #

Types of property 'itemText' are incompatible.
Type '((item: T) => string) | undefined' is not assignable to type '((item: unknown) => string) | undefined'.
Type '(item: T) => string' is not assignable to type '(item: unknown) => string'.
Types of parameters 'item' and 'item' are incompatible.
Type 'unknown' is not assignable to type 'T'.
'unknown' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'unknown'.

错误原因 #

这是TypeScript的逆变类型检查导致的问题：

• Dropdown的泛型S默认会被推断为unknown，而DropdownWrapper的泛型T是unknown的子类型（比如number、string等具体类型）。
• 函数参数是逆变的：(item: T) => string不能赋值给(item: unknown) => string，因为unknown类型的值无法安全转换为T类型（比如T是number时，unknown可能是字符串，直接传参会类型不匹配）。

解决方案 #

给Dropdown显式指定泛型参数为T，让TypeScript明确两个组件使用相同的泛型类型，而不是默认推断S为unknown：

修改DropdownWrapper.tsx中的组件调用代码：

return (
  <>
    {/* 其他UI逻辑 */}
    <Dropdown<T> {...rest} /> {/* 显式绑定泛型T */}
    {/* 其他UI逻辑 */}
  </>
);

这样TypeScript就能正确关联Dropdown和DropdownWrapper的泛型类型，确保itemText的参数类型完全匹配，消除类型错误。

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