TypeScript与React：通用表格组件如何从父组件动态推断类型？

嘿，这个问题其实很好解决——你完全不需要把那些页面专属的类型硬编码到GenericTable的泛型约束里，TypeScript本身就支持根据传入的属性自动推断泛型类型，咱们只需要调整一下组件的泛型定义就行。

问题根源 #

原来的代码里，你把泛型参数ColumnType和RowType的约束硬写成了Page1ColumnType | Page2ColumnType和Page1RowType | Page2RowType，这就把组件的扩展性锁死了——每次新增页面都得修改组件的类型定义，这显然不是咱们想要的。

解决方案1：基于行数据类型的严谨泛型定义 #

如果你的表格列有通用的结构（比如每个列都有key、title，可能还有render函数），可以先定义一个基础列类型，然后用单行数据的泛型来关联列和行的类型：

import React from 'react';

// 定义通用的列类型，关联单行数据的类型T
type BaseColumn<T> = {
  key: keyof T; // 列的key必须是行数据的属性名
  title: string; // 列标题
  render?: (value: T[keyof T]) => React.ReactNode; // 可选的自定义渲染函数
};

// 组件Props类型，用泛型T表示单行数据的类型
type GenericTableProps<T> = {
  columns: BaseColumn<T>[];
  rows: T[];
};

// 组件定义：只需要一个泛型参数T，TypeScript会自动从props推断
export const GenericTable = <T extends Record<string, unknown>>(
  props: GenericTableProps<T>
) => {
  return (
    <table border={1}>
      <thead>
        <tr>
          {props.columns.map(col => (
            <th key={String(col.key)}>{col.title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {props.rows.map((row, idx) => (
          <tr key={idx}>
            {props.columns.map(col => (
              <td key={String(col.key)}>
                {/* 优先使用自定义render，否则直接显示值 */}
                {col.render ? col.render(row[col.key]) : row[col.key]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

这种方式的好处是类型更严谨：列的key必须对应行数据的属性名，render函数的参数类型也会自动匹配对应的属性类型，不会出现类型不匹配的问题。

解决方案2：完全灵活的无约束泛型 #

如果你的不同页面的列结构差异很大，不需要通用约束，那可以直接简化泛型定义，让TypeScript完全自动推断columns和rows的类型：

import React from 'react';

type GenericTableProps<ColumnType, RowType> = {
  columns: ColumnType[];
  rows: RowType[];
};

// 移除泛型参数上的硬编码约束，让TypeScript自动推断ColumnType和RowType
export const GenericTable = <ColumnType, RowType>(
  props: GenericTableProps<ColumnType, RowType>
) => {
  // 这里可以正常使用columns和rows，类型都是自动推断的
  return (
    <table border={1}>
      {/* 表格渲染逻辑 */}
    </table>
  );
};

这种方式最灵活，不管你的columns是什么结构、rows是什么类型，TypeScript都会自动适配，完全不需要提前定义任何页面专属类型。

页面调用示例（以解决方案1为例） #

新增Page3的时候，你只需要定义自己的行数据和列配置，组件会自动推断类型：

// Page3的行数据类型（可选，定义了更清晰）
type Page3RowType = {
  id: number;
  username: string;
  role: 'admin' | 'user' | 'guest';
  operation: React.ReactNode;
};

// Page3的列配置
const page3Columns: BaseColumn<Page3RowType>[] = [
  { key: 'id', title: '用户ID' },
  { key: 'username', title: '用户名' },
  { 
    key: 'role', 
    title: '角色', 
    render: (role) => <span className={`role-${role}`}>{role}</span> 
  },
  { key: 'operation', title: '操作', render: () => <button>删除</button> }
];

// Page3的行数据
const page3Rows: Page3RowType[] = [
  { id: 1, username: 'Alice', role: 'admin', operation: <button>删除</button> },
  { id: 2, username: 'Bob', role: 'user', operation: <button>删除</button> }
];

// 调用组件，TypeScript会自动推断T为Page3RowType
export const Page3 = () => {
  return <GenericTable columns={page3Columns} rows={page3Rows} />;
};

核心思路总结 #

不管用哪种方案，核心都是移除泛型参数上的硬编码类型约束，让TypeScript根据你传入的columns和rows自动推断泛型类型。这样后续新增任何页面调用GenericTable时，都不需要修改组件的代码，TypeScript会自动适配新的类型。

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