如何为@tanstack/react-table通用Table组件正确定义TypeScript类型？

你遇到的问题核心是联合类型无法保证data和columns的类型匹配——TypeScript无法确定传入的data是OrdersRow[]时，columns一定是对应OrdersRow的列定义，反之亦然。正确的做法是用泛型来绑定data和columns的类型，让它们始终成对匹配。

具体实现步骤 #

1. 导入必要类型
   从@tanstack/react-table导入ColumnDef类型，它用来定义表格列的类型，需要绑定行数据类型。

2. 定义泛型组件
   让TableComponent接收一个泛型参数T，代表行数据的类型，然后约束data和columns的类型都基于这个T：

import { useReactTable, ColumnDef } from '@tanstack/react-table';

// 先定义你的行类型
type OrdersRow = {
  orderId: string;
  customerName: string;
  amount: number;
};

type ContainersRow = {
  containerId: string;
  location: string;
  weight: number;
};

// 泛型组件props定义
type TableProps<T> = {
  data: T[];
  columns: ColumnDef<T>[];
};

export function TableComponent<T>({ data, columns }: TableProps<T>) {
  const table = useReactTable({
    data,
    columns,
    // 其他配置项...
  });

  // 渲染表格逻辑...
  return <div>{/* 表格JSX */}</div>;
}

3. 使用组件时自动推导类型
   当你传入对应行类型的data和columns时，TypeScript会自动推导泛型T的类型，无需手动指定：

// 使用订单表格
const orderColumns: ColumnDef<OrdersRow>[] = [
  { accessorKey: 'orderId', header: '订单ID' },
  { accessorKey: 'customerName', header: '客户名称' },
];

<TableComponent data={ordersData} columns={orderColumns} />

// 使用容器表格
const containerColumns: ColumnDef<ContainersRow>[] = [
  { accessorKey: 'containerId', header: '容器ID' },
  { accessorKey: 'location', header: '存放位置' },
];

<TableComponent data={containersData} columns={containerColumns} />

为什么联合类型不行？ #

如果用联合类型定义TableProps，比如：

type TableProps = {
  data: OrdersRow[] | ContainersRow[];
  columns: ColumnDef<OrdersRow>[] | ColumnDef<ContainersRow>[];
};

TypeScript会认为data和columns的类型是独立的联合，可能出现data是OrdersRow[]但columns是ColumnDef<ContainersRow>[]的非法组合，因此会抛出类型不兼容的错误。而泛型可以强制data和columns始终绑定到同一个行数据类型，从根源避免这种类型不匹配问题。

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