如何在打字稿中使用react-table useSortBy

Question

我到处搜索，但找不到一种干净的方法来使用

useSortBy

钩子和打字稿。

  const {
    getTableProps,
    getTableBodyProps,
    rows,
    prepareRow,
    headerGroups,
  } = useTable({ columns, data }, useSortBy);

  return (
    <Table {...getTableProps()}>
      <TableHead>
        {headerGroups.map(hg => (
          <TableRow {...hg.getHeaderGroupProps()}>
            {hg.headers.map(column => (
              <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render('Header')}
                  {column.isSorted
                    ? column.isSortedDesc
                      ? "D"
                      : "U"
                  : null
                }
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableHead>
    // ...

我收到 TS 错误，因为

getSortByToggleProps

上不存在

column

isSorted

isSortedDesc

上也不存在。

我也尝试过用

UseSortByHooks

添加

useTable

但没有运气：

useTable<UseSortByHooks<MyData>>(...)

Answer 1

如here所述，使用插件时需要创建声明文件。

Answer 2

我在全局类型index.d.ts中扩展了接口HeaderGroup。添加了 UseSortByColumnProps

export interface HeaderGroup<D extends object = {}> extends ColumnInstance<D>, UseTableHeaderGroupProps<D>, UseSortByColumnProps<D> {}

这对我有帮助。