React TypeScript泛型问题：组件Props含带参函数时类型异常

问题场景 #

React版本为15或18，TypeScript版本4.9.5，在使用泛型组件时出现以下异常：

• 当getData仅声明参数但不使用时，checkable的泛型类型正常，能正确访问item.name
• 当getData使用参数（哪怕只是声明参数变量），checkable访问item.name会触发类型错误

复现代码：

interface IProps<T = any> {
  getData: (params: any) => Promise<{ dataSource: T[] }>;

  checkable: (data: T) => string;
}

function MyComponent<T>(props: IProps<T>) {
  return <div></div>;
}

class MyPage extends React.Component {
  render() {
    return (
      <div>
        <MyComponent
          getData={() => {
            // 1. 不使用params时，checkable正常
            return Promise.resolve({ dataSource: [{ name: 'Jay' }] });
          }}
          checkable={(item) => {
            return item.name; // 类型正常
          }}
        />
        <MyComponent
          getData={(params) => {
            // 2. 使用params时，checkable报错
            return Promise.resolve({ dataSource: [{ name: 'Jay' }] });
          }}
          checkable={(item) => {
            return item.name; // 类型错误：属性'name'不存在于类型'any'或'unknown'
          }}
        />
      </div>
    );
  }
}

问题原因 #

这是TypeScript类型推导优先级导致的：

• 第一个实例中，getData未使用参数params，TypeScript会优先从返回值的dataSource结构自动推导泛型T为{ name: string }，因此checkable的item类型明确
• 第二个实例中，getData声明并引用了params（哪怕没实际使用），TypeScript会优先从函数参数的类型（这里是any）反向推导，导致泛型T的类型推断出现偏差，最终item的类型无法识别name属性

解决方案 #

方案1：显式指定泛型参数 #

直接在使用MyComponent时明确指定泛型T的类型，强制约束类型推导：

<MyComponent<{ name: string }>
  getData={(params) => {
    return Promise.resolve({ dataSource: [{ name: 'Jay' }] });
  }}
  checkable={(item) => {
    return item.name; // 类型正常
  }}
/>

方案2：优化getData的参数类型约束 #

如果params实际不需要，可以将其类型设为never或可选，避免干扰类型推导：

interface IProps<T = any> {
  // params设为可选且类型为never，明确不需要参数
  getData: (params?: never) => Promise<{ dataSource: T[] }>;
  checkable: (data: T) => string;
}

如果params确实需要使用，给它一个明确的具体类型（而非any），也能帮助TypeScript正确推导T：

// 定义params的具体类型
interface GetDataParams {
  // 你的参数结构
  page?: number;
}

interface IProps<T = any> {
  getData: (params: GetDataParams) => Promise<{ dataSource: T[] }>;
  checkable: (data: T) => string;
}

方案3：在返回值中明确类型断言 #

在getData的返回值里，通过类型断言明确dataSource的类型，帮助TypeScript推导T：

getData={(params) => {
  return Promise.resolve({ 
    dataSource: [{ name: 'Jay' }] as { name: string }[] 
  });
}}

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