使用打字稿的反应表出了点问题
Posted
技术标签:
【中文标题】使用打字稿的反应表出了点问题【英文标题】：Something went wrong with react table using typescript 【发布时间】：2020-10-26 17:33:45 【问题描述】：将 react-table 与 useGlobalFilter 一起使用时出现打字稿错误。我只是按照互联网上的一些说明进行操作。 这是我的代码：
const DataTable : React.FC<IDataTableProps> = (columns, data) =>
const
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
setGlobalFilter,
state,
= useTable(columns, data, useGlobalFilter);
const GlobalFilter = ( globalFilter , setGlobalFilter : globalFilter: any, setGlobalFilter: any) =>
return (
<input
value=globalFilter || ""
onChange=e =>
setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
placeholder=`Search All ...`
/>
);
;
return <Container>
<GlobalFilter globalFilter=state.globalFilter setGlobalFilter=setGlobalFilter />
<Table ...getTableProps()>
<THead>
headerGroups.map(headerGroup => (
<TR ...headerGroup.getHeaderGroupProps()>
headerGroup.headers.map(column =>
return (
<TH ...column.getHeaderProps()>column.render("Header")</TH>
)
)
</TR>
))
</THead>
<TBody ...getTableBodyProps() >
rows.map((row, i) =>
prepareRow(row);
return (
<TR ...row.getRowProps()>
row.cells.map(cell =>
return <TD ...cell.getCellProps() >
cell.render("Cell")
</TD>
)
</TR>
)
)
</TBody>
</Table>
</Container>
我得到的 Typescript 错误：“TableInstance”类型上不存在属性“setGlobalFilter”。 TS2339
谁能帮帮我？非常感谢！
【问题讨论】：
【参考方案1】：如果您在从DefinitelyTyped 执行迁移指南时收到投诉All declarations of 'TableInstance' must have identical type parameters.ts(2428)，您可以手动调整提供的react-table-config.d.ts 文件以匹配您的@types/react-table 包中的类型参数。
进入类型定义包（node_modules/@types/react-table），查看index.d.ts文件你会看到很多泛型接口，这些接口的参数与你在react-table-config.d.ts文件中的接口不同，这就是它抱怨的原因尝试合并这些声明时。
例如，这是类型定义包中的接口
export interface TableInstance<D extends object = >
这是你react-table-config.d.ts中对应的接口
export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
从那里修复应该很简单，只需更改 react-table-config.d.ts 文件中的参数部分以匹配您的类型定义包。
Alter react-table-config.d.ts 并不是真正可取的（尤其是“按原样获取此文件”的评论），这仍然是最适合我的方法，没有任何投诉和降级（我使用的是 react-table 7.7.0和@types/react-table 7.7.2)。我希望react-table v8 有其内置的类型定义来避免这种头痛。
【讨论】：
很好的解释【参考方案2】：试试这个：
创建一个文件夹@types 和 创建文件@types/react-table-config.d.ts
放在那个文件里
import UseGlobalFiltersOptions from 'react-table'
declare module 'react-table'
export interface TableOptions<D extends Record<string, unknown>>
extends UseGlobalFiltersOptions<D>
export interface TableInstance<D extends Record<string, unknown>>
extends UseGlobalFiltersInstanceProps<D>
【讨论】：
【参考方案3】：您可能缺少@types/react-table 包。
如果该软件包已安装，则需要执行另一个步骤才能使其运行。您需要在@types 文件夹中创建一个react-table-config.d.ts 文件。
请填写如下配置，并取出不需要的部分
import
UseColumnOrderInstanceProps,
UseColumnOrderState,
UseExpandedHooks,
UseExpandedInstanceProps,
UseExpandedOptions,
UseExpandedRowProps,
UseExpandedState,
UseFiltersColumnOptions,
UseFiltersColumnProps,
UseFiltersInstanceProps,
UseFiltersOptions,
UseFiltersState,
UseGlobalFiltersColumnOptions,
UseGlobalFiltersInstanceProps,
UseGlobalFiltersOptions,
UseGlobalFiltersState,
UseGroupByCellProps,
UseGroupByColumnOptions,
UseGroupByColumnProps,
UseGroupByHooks,
UseGroupByInstanceProps,
UseGroupByOptions,
UseGroupByRowProps,
UseGroupByState,
UsePaginationInstanceProps,
UsePaginationOptions,
UsePaginationState,
UseResizeColumnsColumnOptions,
UseResizeColumnsColumnProps,
UseResizeColumnsOptions,
UseResizeColumnsState,
UseRowSelectHooks,
UseRowSelectInstanceProps,
UseRowSelectOptions,
UseRowSelectRowProps,
UseRowSelectState,
UseRowStateCellProps,
UseRowStateInstanceProps,
UseRowStateOptions,
UseRowStateRowProps,
UseRowStateState,
UseSortByColumnOptions,
UseSortByColumnProps,
UseSortByHooks,
UseSortByInstanceProps,
UseSortByOptions,
UseSortByState
from 'react-table'
declare module 'react-table'
// take this file as-is, or comment out the sections that don't apply to your plugin configuration
export interface TableOptions<D extends Record<string, unknown>>
extends UseExpandedOptions<D>,
UseFiltersOptions<D>,
UseGlobalFiltersOptions<D>,
UseGroupByOptions<D>,
UsePaginationOptions<D>,
UseResizeColumnsOptions<D>,
UseRowSelectOptions<D>,
UseRowStateOptions<D>,
UseSortByOptions<D>,
// note that having Record here allows you to add anything to the options, this matches the spirit of the
// underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
// feature set, this is a safe default.
Record<string, any>
export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
extends UseExpandedHooks<D>,
UseGroupByHooks<D>,
UseRowSelectHooks<D>,
UseSortByHooks<D>
export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
extends UseColumnOrderInstanceProps<D>,
UseExpandedInstanceProps<D>,
UseFiltersInstanceProps<D>,
UseGlobalFiltersInstanceProps<D>,
UseGroupByInstanceProps<D>,
UsePaginationInstanceProps<D>,
UseRowSelectInstanceProps<D>,
UseRowStateInstanceProps<D>,
UseSortByInstanceProps<D>
export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
extends UseColumnOrderState<D>,
UseExpandedState<D>,
UseFiltersState<D>,
UseGlobalFiltersState<D>,
UseGroupByState<D>,
UsePaginationState<D>,
UseResizeColumnsState<D>,
UseRowSelectState<D>,
UseRowStateState<D>,
UseSortByState<D>
export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
extends UseFiltersColumnOptions<D>,
UseGlobalFiltersColumnOptions<D>,
UseGroupByColumnOptions<D>,
UseResizeColumnsColumnOptions<D>,
UseSortByColumnOptions<D>
export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
extends UseFiltersColumnProps<D>,
UseGroupByColumnProps<D>,
UseResizeColumnsColumnProps<D>,
UseSortByColumnProps<D>
export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>
extends UseGroupByCellProps<D>,
UseRowStateCellProps<D>
export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
extends UseExpandedRowProps<D>,
UseGroupByRowProps<D>,
UseRowSelectRowProps<D>,
UseRowStateRowProps<D>
解决方案来自the DefinitelyTyped for react-table
【讨论】：
在@types 文件夹中声明了 react-table-config.d.ts 文件后出现错误。有什么解决方法吗？(Error: All declarations of 'TableOptions' must have identical type parameters.ts(2428))
@Prateek 我也有同样的问题；上述文件中的所有导出（TableOption、Hooks、TableInstance 等）都会产生相同的错误。在经历了很多挫折之后，我设法通过将版本回滚到@types/react-table 7.0.14 和react-table 7.0.4 来修复它。不过，这似乎不是一个令人满意的解决方案。
如果您想要列中的类名（或其他自定义属性），请参阅***.com/a/69547841/481207。
上面的文件可以在你的代码库中，例如。 /src/types，即。您不必将它放在可以被删除/覆盖的/node_modules 中。以上是关于使用打字稿的反应表出了点问题的主要内容，如果未能解决你的问题，请参考以下文章