将反应虚拟化表从 javascript 转换为 typescript - 类型问题

Question

我正在使用这个演示：https://codesandbox.io/s/react-virtualized-table-checbox-stackoverflow-rbl0v?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js 我把我的反应项目，我有这段代码的问题：

 function _sortList({ sortBy, sortDirection }) {
    const newList = _.sortBy(list, [sortBy]);
    if (sortDirection === SortDirection.DESC) {
      newList.reverse();
    }
    return newList;
  }

  // eslint-disable-next-line no-shadow
  function _sort({ sortBy, sortDirection }) {
    setSortBy(sortBy);
    setSortDirection(sortDirection);
    setSortedList(_sortList({ sortBy, sortDirection }));
  }

变量 newList 有一个奇怪的类型（见下面的错误），不会被 setSortedList 函数接受。 我已经尝试构建一个接口，但我不确定如何使 newList 成为那种类型。 有关如何在 typescript 中使其行为的任何提示？

错误

Argument of type '(number | { id: number; code: string; title: string; status: string; assigned: string; } | { <S extends { id: number; code: string; title: string; status: string; assigned: string; }>(callbackfn: (value: { id: number; code: string; title: string; status: string; assigned: string; }, index: number, array: { ...; }[])...' is not assignable to parameter of type 'SetStateAction<{ id: number; code: string; title: string; status: string; assigned: string; }[]>’.

  Type '(number | { id: number; code: string; title: string; status: string; assigned: string; } | { <S extends { id: number; code: string; title: string; status: string; assigned: string; }>(callbackfn: (value: { id: number; code: string; title: string; status: string; assigned: string; }, index: number, array: { ...; }[])...' is not assignable to type '{ id: number; code: string; title: string; status: string; assigned: string; }[]’.

    Type 'number | { id: number; code: string; title: string; status: string; assigned: string; } | { <S extends { id: number; code: string; title: string; status: string; assigned: string; }>(callbackfn: (value: { id: number; code: string; title: string; status: string; assigned: string; }, index: number, array: { ...; }[]) ...' is not assignable to type '{ id: number; code: string; title: string; status: string; assigned: string; }’.

      Type 'number' is not assignable to type '{ id: number; code: string; title: string; status: string; assigned: string; }'.

Answer 1

我们必须声明对象的两个属性的类型，这些函数将其作为参数({ sortBy, sortDirection })。如果我们要在 JSX 中内联调用排序函数，那么可以从组件签名中推断出参数。但是当我们将这样的函数外部化时，我们需要告诉它期望什么参数，因为函数本身不知道它在哪里被调用。

将鼠标悬停在Table 上的sort 属性上会显示参数：

(JSX attribute) sort?: (info: {
    sortBy: string;
    sortDirection: SortDirectionType;
}) => void

由于我们在两个地方使用它，让我们为该对象类型创建一个命名别名：

interface SortInfo {
  sortBy: string;
  sortDirection: SortDirectionType;
}

现在我们将该类型应用于我们的函数并且一切正常，因为函数知道sortBy 和sortDirection 的正确类型：

function _sort({ sortBy, sortDirection }: SortInfo) {

function _sortList({ sortBy, sortDirection }: SortInfo) {

Fully Converted Code