在React ant设计中应用类型

Question

我使用的是antd设计中的表。并且，我想键入onChange函数，该函数作为表组件中的参数传递。

const change = (
pagination: TablePaginationConfig,
filters: Record<string, Key[] | null>,
sorter: SorterResult<RecordType> | SorterResult<RecordType>[]
) => {};
ReactDOM.render(
<Table onChange={change} columns={columns} dataSource={data} />,
document.getElementById("container")
);

问题是我无法导入RecordType。如何在不使用any的情况下正确键入此代码？这是一个演示。

Answer 1

您不必显式地声明change的类型，SorterResult的泛型是dataSource项的类型，并且您可以通过两种方式隐式声明change的类型。

1.将泛型传递到表元素

type TDataItem = {
key1: number;
key2: string;
}
<Table<TDataItem> onChange={()=>{}} columns={columns} dataSource={[]} />,

2.将泛型传递到列：

import { ColumnProps } from 'antd/lib/table';
...
type TDataItem = {
key1: number;
key2: string;
}
...
const columns: ColumnProps<TDataItem>[] = [
<Table onChange={()=>{}} columns={columns} dataSource={[]} />,

Answer 2

您只想让Table组件知道您传递给它的数据类型，以帮助处理类型。

如果要更新函数，可以使用当前数据的形状作为类型，并且Table应指向正确的RecordType

type TableData = typeof data[0];
const change = (
pagination: TablePaginationConfig,
filters: Record<string, Key[] | null>,
sorter: SorterResult<RecordType> | SorterResult<RecordType>[]
) => {};
return <Table<TableData> columns={columns} dataSource={data} onChange={onChange} />;

Answer 3

假设您给出了正确的列类型

const columns: ColumnsType<TDataItem> = [...]

你可以试试sorter?.['field']

因此，在onChange函数-中

onChange: (pagination, filter, sorter) => {
console.log(sorter?.['field'])
}