如何在TypeScript中使用react-table的useSortBy Hook并解决类型错误

我懂你在TypeScript里用react-table的useSortBy Hook时遇到的类型困扰——找不到getSortByToggleProps、isSorted和isSortedDesc这些属性确实挺闹心的。下面一步步给你捋清楚解决方案：

1. 导入正确的类型定义 #

首先得确保从react-table里把useSortBy相关的类型都导进来，让TypeScript能识别扩展的属性：

import { useTable, Column, UseSortByHooks, UseSortByColumnProps } from 'react-table';

2. 明确数据和列的类型 #

先定义你的业务数据结构，再给列数组加上支持排序的类型注解：

// 替换成你实际的业务数据类型
interface MyData {
  id: number;
  username: string;
  joinDate: string;
}

// 定义支持排序的列类型，合并基础列和排序扩展属性
type SortableColumn = Column<MyData> & UseSortByColumnProps<MyData>;

// 列数组使用上面定义的类型
const columns: SortableColumn[] = [
  { Header: 'ID', accessor: 'id' },
  { Header: '用户名', accessor: 'username' },
  { Header: '加入日期', accessor: 'joinDate' },
];

3. 正确传递useTable的泛型参数 #

调用useTable时，要按顺序指定数据类型和useSortBy钩子扩展类型，这是之前你可能没做对的地方：

const {
  getTableProps,
  getTableBodyProps,
  rows,
  prepareRow,
  headerGroups,
} = useTable<MyData, UseSortByHooks<MyData>>(
  { columns, data }, // data是你的MyData类型数组
  useSortBy
);

4. 渲染表头时的类型适配 #

现在TypeScript应该能自动识别列上的排序属性了，如果还有提示，显式指定列类型就行：

return (
  <Table {...getTableProps()}>
    <TableHead>
      {headerGroups.map(hg => (
        <TableRow {...hg.getHeaderGroupProps()}>
          {hg.headers.map((column: SortableColumn) => (
            <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>
              {column.render('Header')}
              {/* 添加排序指示器 */}
              {column.isSorted ? (column.isSortedDesc ? '↓' : '↑') : ''}
            </TableCell>
          ))}
        </TableRow>
      ))}
    </TableHead>
    <TableBody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row);
        return (
          <TableRow {...row.getRowProps()}>
            {row.cells.map(cell => (
              <TableCell {...cell.getCellProps()}>
                {cell.render('Cell')}
              </TableCell>
            ))}
          </TableRow>
        );
      })}
    </TableBody>
  </Table>
);

为啥之前的泛型尝试没生效？ #

你之前写的useTable<UseSortByHooks<MyData>>参数顺序错了——useTable的第一个泛型是业务数据类型，第二个才是钩子扩展类型，必须同时指定这两个，TypeScript才能正确推断出所有排序相关的属性。

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