如何从TypeScript泛型DataTableRow推断类型，实现React组件行类型安全？

要实现你想要的类型校验，核心是把React组件和Props接口都改成泛型，让TypeScript能从传入的rows数组自动推断出T的类型。下面是具体的实现步骤和代码示例：

1. 重构泛型Props和组件 #

首先，把DataTableProps改成泛型接口，让它依赖于行定义的类型T；同时把React组件也声明为泛型组件，关联到T的类型：

// 基础泛型行类型定义
type DataTableRow<T> = {
  data: T;
  // 其他行相关属性...
};

// 泛型组件Props接口
interface DataTableProps<T> {
  rows: DataTableRow<T>[];
  // 组件其他属性...
}

// 泛型React组件
const DataTable = <T extends unknown>(props: DataTableProps<T>) => {
  // 组件内部逻辑，此时props.rows的data会自动推断为T类型
  return <div>{props.rows.map(row => <div key={row.data.id}>{row.data.name}</div>)}</div>;
};

2. 使用时的类型校验演示 #

当你定义具体的行接口并传入对应数组时，TypeScript会自动推断T的类型，并且对传入的rows做严格校验：

// 定义具体的行结构
interface RunRowDef {
  id: string;
  name: string;
  status: 'running' | 'finished' | 'failed';
}

// 创建符合类型的行数组
const validRows: DataTableRow<RunRowDef>[] = [
  { data: { id: '1', name: '任务1', status: 'running' } },
  { data: { id: '2', name: '任务2', status: 'finished' } },
];

// 传入组件，TypeScript自动推断T为RunRowDef，组件内部能正确识别row.data的类型
<DataTable rows={validRows} />;

// 如果传入不符合RunRowDef的行，TypeScript会直接报错
const invalidRows = [
  { data: { id: '3', name: '任务3', status: 'invalid' } }, // 错误：status值不符合类型约束
];
<DataTable rows={invalidRows} />; // 此处触发类型错误提示

关键说明 #

• 组件和Props都声明为泛型后，TypeScript会根据传入的rows数组类型自动推断T的具体类型，无需手动指定（也可以手动添加<RunRowDef>来明确类型）。
• 无论传入的rows数组结构，还是组件内部访问row.data时的类型，都会有严格校验，完全满足类型安全性需求。

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