用打字稿反应 useTable 钩子

Question

所以我有一个带有 useTable 的 JavaScript 类。 在 Java 脚本中它被使用如下

import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table";

const {getTableProps,getTableBodyProps, headerGroups, page,prepareRow,state,visibleColumns, nextPage,pageOptions,pageCount,previousPage,canPreviousPage,canNextPage,setPageSize,gotoPage
      } = useTable({columns,data,defaultColumn,filterTypes,initialState: { pageSize: 10, pageIndex: 0 }
       },useFilters, useSortBy,usePagination);

我正在将我的 javascript 项目转换为打字稿。

在打字稿中，useTable 行给出了错误。

示例：Property 'page' does not exist on type 'TableInstance<object>'.ts(2339)

那个 initialState 属性给出了我的以下错误

Type '{ pageSize: number; pageIndex: number; }' is not assignable to type 'Partial<TableState<object>>'.
  Object literal may only specify known properties, and 'pageSize' does not exist in type 'Partial<TableState<object>>'.ts(2322)
index.d.ts(172, 5): The expected type comes from property 'initialState' which is declared here on type 'TableOptions<object>'

如何在 Typescript 中编写 useTable 行？

Answer 1

要在打字稿中使用像 usePagination 这样的 react-table 插件扩展，需要声明插件的类型。

这是通过创建 react-table-config.d.ts 或类似的并声明您将使用的插件（或所有插件）的类型来完成的。

此处描述：https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

Answer 2

如果您转到 react-table documentation，您可以找到有关如何将选项对象传递给根挂钩的说明。

还有一个可能有用的 example project on github。