输入 React props 返回错误

Question

我正在使用 ANT 设计并为我的应用程序做出反应。 我有 2 个组件：

 //PARENT const Test = () => { const [state, setState] = useState([]); function onChange( pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<RecordType> | SorterResult<RecordType>[], extra ) { console.log("params", sorter); setState([sorter.order, sorter.field]); } console.log("params", state); return <CustomTable onChange={onChange} />; };

和：

 //CHILD const CustomTable = ({ onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<RecordType> | SorterResult<RecordType>[], extra: TableCurrentDataSource<RecordType>) => void; }) => { return ( <Table columns={columns} dataSource={data} onChange={onChange} /> ) }

您如何看到我尝试为onChange function 添加类型。 一次在 CHILD 组件中作为道具，一次在侧 PARENT 组件中，但尝试为sorter参数添加下一个类型时出现错误sorter: SorterResult<RecordType> | SorterResult<RecordType>[], sorter: SorterResult<RecordType> | SorterResult<RecordType>[], . 问题是当我尝试更改RecordType泛型时，因为我不知道应该在那里添加什么值。 现在我得到： Property 'order' does not exist on type 'SorterResult<any> | SorterResult<any>[] Property 'order' does not exist on type 'SorterResult<any> | SorterResult<any>[]和Property 'field' does not exist on type 'SorterResult<any> | SorterResult<any>[]'. Property 'field' does not exist on type 'SorterResult<any> | SorterResult<any>[]'. .在我的情况下，如何为这个 function 参数（ sorter ）添加类型？
演示： https://codesandbox.io/s/multiple-sorter-antd4150-forked-ie0o5?file=/index.tsx:341-761

Answer 1

解构 Object 时不能传递类型。 请将CustomTable修改为：

interface RecordType {
 key: string,
 name: string,
 chinese: number,
 math: number,
 english: number,
}

type Props = {
 onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<RecordType> | SorterResult<RecordType>[], extra: TableCurrentDataSource<RecordType>) => void,
}

const CustomTable = ({
  onChange,
}: Props) => {
  return (
    <Table columns={columns} dataSource={data} onChange={onChange} />
  )
}