在React ant设计中应用类型 [英] Apply types in React ant design

问题描述

我正在使用antd设计的Table.而且，我想输入在表组件中作为参数传递的 onChange 函数.

I am using Table from antd design. And, I want to type onChange function that is passed as param in Table component.

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 的情况下正确键入此代码?这是演示.

The issue is that I can't import RecordType. How to type properly this code without using any? Here is a demo.

推荐答案

您只想让Table组件知道要传递给它的数据类型以帮助处理这些类型.

You just want to let the Table component know what type of data are you passing to it to help with the types.

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

If you were to update your function, you can use your current data's shape as your type and your Table should point to the correct 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} />;

这篇关于在React ant设计中应用类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！