问题描述
我使用 @type/react-table
为我的表设置列,但我的 IDE 出现错误,抱怨 Cell
的类型不正确。我认为它是由 Cell
是 @type/react-table
的可选类型引起的,我该如何解决这个问题?
//column.tsx
import {Column,Cell} from 'react-table';
export interface ColumnValue {
[key: string]: any;
}
export type TableColumn = Column<ColumnValue>
export function createColumn(colDef: TableColumn): TableColumn {
return colDef;
}
export const name = createColumn({
id: 'name',Header: 'Name Column',Cell({value}}) {
return value.hyperlink
},});
//column.test.tsx
import {render} from '@testing-library/react';
import {name} from './Name';
describe('Test Name Column',() => {
it('shows the name',() => {
const {getByText} = render(
name.Cell({
// Error show TS2339: Property 'Cell' does not exist on type 'TableColumn'
value: {hyperlink: 'asadasd'}}),})
);
expect(getByText('i am name')).toBeTruthy();
});
});
解决方法
Column
的定义是一系列描述可能的列配置的不同类型的联合。只有其中一些具有 Cell
属性。 ColumnGroup
没有。因此,您不确定 Column
类型的变量是否支持 Cell
属性。
您可以通过使 createColumn
函数通用来解决此问题。它强制 colDef
可分配给 TableColumn
,但不会扩展类型。
export function createColumn<C extends TableColumn>(colDef: C): C {
return colDef;
}
现在,您会在链的更深处遇到错误,因为 Cell
期望使用完整的 CellProps
进行调用。
更新:
当前设置将列配置中有效 Cell
的道具类型推断为 CellProps<ColumnValue,any>
。这意味着你可以只写 Cell({value}) {
而不指定 props 类型。
您不能为 的 Cell
使用推断的 props 类型,并且还获取打字稿来推断您的特定 Cell
仅使用来自那些(至少不是没有一些高级的 Typescript 技巧)。
声明 value
只需要一个 value 属性很容易,但您必须明确说明这一点。
Cell
React 测试库的 export const name = createColumn({
id: 'name',Header: 'Name Column',Cell({value}: {value: ColumnValue}) {
return value.hyperlink
},});
方法期望使用 render
调用。由于 ReactElement
的定义松散,现在您的 Cell
返回 any
。但可能 ColumnValue {[key: string]: any;}
是一个 value.hyperlink
这将是一个 Typescript 错误。您应该将它包装在一个片段中,要么在 string
本身中,要么在 Cell
中。
render
上面的定义会导致测试出错,所以需要这样做:
export const name = createColumn({
id: 'name',Cell({value}: {value: {hyperlink: string}}) {
return value.hyperlink
},});