如何为组件添加泛型类型以接收不同类型的props数据

针对你遇到的多类型数据适配问题，无需维护庞大的联合类型或使用any，核心方案是给组件添加泛型约束，让组件自动适配任意符合结构规范的业务数据类型。

1. 抽象通用Props结构 #

所有业务类型（TUsers、TProducts等）的共性是包含一个data数组，我们用泛型抽象这个通用结构：

// 泛型T代表data数组中单个元素的类型
type DataGridProps<T> = {
  data: {
    data: T[];
  };
};

2. 实现泛型组件 #

以React组件为例（其他框架逻辑一致），通过泛型让TypeScript自动推导传入数据的类型：

function DataGrid<T>(props: DataGridProps<T>) {
  // 此时props.data.data的类型为T[]，完全类型安全
  return (
    <div className="data-grid">
      {props.data.data.map((item, idx) => (
        <div key={idx}>
          {/* 可根据不同业务类型做差异化渲染，也可通过类型守卫进一步约束 */}
          {('username' in item) ? item.username : ('productname' in item) ? item.productname : ''}
        </div>
      ))}
    </div>
  );
}

3. 调用组件时自动推导类型 #

无需手动声明联合类型，传入业务数据时TypeScript会自动识别元素类型：

// 业务类型定义
type TUsers = { data: { username: string }[] };
type TProducts = { data: { productname: string }[] };
type TCustomers = { data: { customername: string }[] };

// 场景1：传入用户数据，自动推导T为{ username: string }
const users: TUsers = { data: [{ username: 'myName' }] };
<DataGrid data={users} />;

// 场景2：传入商品数据，自动推导T为{ productname: string }
const products: TProducts = { data: [{ productname: 'prod' }] };
<DataGrid data={products} />;

4. 进阶：给泛型加约束（可选） #

如果所有业务数据的元素有共同属性（比如id），可以给泛型加约束，进一步提升类型安全性：

// 约束：所有元素必须包含id属性
type BaseItem = { id: string | number };

// 泛型T必须符合BaseItem的结构
type DataGridProps<T extends BaseItem> = {
  data: {
    data: T[];
  };
};

// 此时业务类型需包含id
type TUsers = { data: { id: number; username: string }[] };

这种方案不管新增多少种业务类型，都无需修改组件的类型定义，完全实现了类型安全与通用性的平衡。

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