如何解决TypeScript泛型对象的组件部分函数类型签名报错？

报错原因 #

你遇到的TypeScript错误，本质是泛型T可能是约束类型的更具体子类型。举个例子，如果T被实例化为{ bar: 3, name: string }（这里bar是字面量类型3，而非宽泛的number），你返回的{ ...props, bar: 3 }类型是Omit<T, 'bar'> & { bar: number }，也就是{ name: string, bar: number }，但T要求bar必须是3，number类型无法赋值给更具体的字面量类型3，因此编译器抛出错误。

解决方案一：调整泛型定义（推荐，类型更安全） #

换一种泛型思路：让T代表不需要填充的props部分，组件接收的是T & { bar: number }（即需要填充bar的完整props）。这样包装后的组件只需要接收T，合并bar:3后正好匹配组件的props类型，完全避免类型不兼容问题：

function foo<T>(functionalComponent: (props: T & { bar: number }) => JSX.Element) {
  return (props: T) => {
    return functionalComponent({ ...props, bar: 3 });
  };
}

解决方案二：类型断言（适合保留原泛型结构场景） #

如果必须保留原有的泛型约束逻辑，可以使用类型断言告诉编译器：你返回的对象确实符合T的类型。因为我们明确填充了bar的值，这个断言是安全的：

function foo<T extends { bar: number }>(functionalComponent: (props: T) => JSX.Element) {
  return (props: Omit<T, 'bar'>) => {
    return functionalComponent({ ...props, bar: 3 } as T);
  };
}

简化示例的修复 #

对应你给出的简化示例，同样可以用这两种方式修复：

方式一（调整泛型） #

function func<T>(param: T): T & { foo: number } {
  return { ...param, foo: 3 };
}

方式二（类型断言） #

function func<T extends { foo: number }>(param: Omit<T, 'foo'>): T {
  return { ...param, foo: 3 } as T;
}

内容的提问来源于stack exchange，提问作者D-Y