如何在TypeScript中为泛型类型指定属性作为键，实现React可复用表格组件

嘿，我来帮你搞定这个泛型表格组件的类型定义问题！你想要的其实是让TypeScript帮你校验columns里的path必须是传入数据类型的合法属性键，这样既能保证类型安全，又能让组件复用性拉满。

下面是完整的实现思路和代码：

首先，我们需要给columns定义一个泛型类型，让path字段严格对应数据类型的属性键：

// 定义列的泛型类型，T是数据项的类型
type Column<T> = {
  label: string;
  // path必须是T的属性键之一
  path: keyof T;
};

接下来，我们的Table组件就可以用这个泛型来约束props了：

import React from 'react';

type Column<T> = {
  label: string;
  path: keyof T;
};

// 表格组件的props，使用泛型T来约束数据和列的类型
type TableProps<T> = {
  data: T[];
  columns: Column<T>[];
};

function Table<T>({ data, columns }: TableProps<T>) {
  return (
    <table>
      <thead>
        <tr>
          {/* 渲染表头 */}
          {columns.map((column) => (
            <th key={column.path}>{column.label}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* 渲染表格内容 */}
        {data.map((item, index) => (
          <tr key={index}>
            {columns.map((column) => (
              <td key={column.path}>{item[column.path]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

现在你就可以像你期望的那样使用这个组件了，而且TypeScript会自动帮你做类型校验：

type Person = {
  name: string;
};

const people: Person[] = [
  { name: "John Smith" },
];

// 这里如果path写错了（比如写成'nam'），TypeScript会直接报错
const columns: Column<Person>[] = [
  { label: "Name", path: "name" },
];

function App() {
  return <Table<Person> data={people} columns={columns} />;
}

这样做的好处是：

• 类型安全：如果columns里的path不是数据类型的合法属性，TypeScript会立刻提示错误
• 完全复用：不管你的数据是Person、Product还是其他任何类型，只要传入对应的泛型参数，组件就能正常工作
• 自动提示：在编写columns的时候，编辑器会自动补全数据类型的属性名，提升开发效率

如果你还想支持更复杂的场景（比如自定义单元格渲染），还可以给Column类型加一个render函数：

type Column<T> = {
  label: string;
  path: keyof T;
  // 可选的自定义渲染函数，接收当前数据项和属性值
  render?: (item: T, value: T[keyof T]) => React.ReactNode;
};

然后在组件里使用这个render函数：

<td key={column.path}>
  {column.render ? column.render(item, item[column.path]) : item[column.path]}
</td>

这样你就能灵活定制某些列的显示方式啦！

备注：内容来源于stack exchange，提问作者Kez