Typescript 无法分配类型 '{ [key: string]: string; }[]' 键入 'T[]'

Question

我有一个独立的辅助函数，它允许按字符串键过滤对象数组：

function filterRows(
  rows: Array<{ [key: string]: string }>,
  searchKey: string
) {
  return rows.filter((obj) =>
    Object.keys(obj).some((key) => obj[key].toString().includes(searchKey))
  );
}

在组件中，我有一个 TableRowsCells 类型的变量 Array<T>（组件推断类型）

所以，这个变量是可以有价值的；示例：

const TableRowsCells = [
  {
    firstname: 'John',
    lastname: 'Adams'
  },
  {
    firstname: 'Paul',
    lastname: 'Walker'
  },
];

或

const TableRowsCells = [
  {
    company: 'Vody aho',
    nb_employees: 1590,
    country: 'Hong Kong'
  },
  {
    company: 'Royal spirit',
    nb_employees: 15,
    country: 'USA'
  },
];

现在我想使用上面的辅助函数过滤这个变量：

type EnhancedTableProps<T> = {
  TableRowsCells: Array<T>;
  searchKey?: string;
};

function EnhancedTable<T>({ TableRowsCells, searchKey }: EnhancedTableProps<T>) {
  /** Code stuff...**/

  let outputRowsItems = TableRowsCells;
  if (typeof searchKey === 'string' && searchKey.length > 2) {
    outputRowsItems = filterRows(TableRowsCells, searchKey);
  }

  /** Code stuff...**/
}

像这样，我有 2 个打字稿错误：

错误 1（outputRowsItems = filterRows(TableRowsCells, searchKey); in outputRowsItems）：

Cannot assign type '{ [key: string]: string; }[]' to type 'T[]'.
  Cannot assign type '{ [key: string]: string; }' to type 'T'.
    'T' could have been instantiated with an arbitrary type which may not be related to '{ [key: string]: string; }'.ts(2322)

错误 2（TableRowsCells 中的outputRowsItems = filterRows(TableRowsCells, searchKey);）：

(parameter) TableRowsCells: T[]
Argument of type 'T[]' is not assignable to parameter of type '{ [key: string]: string; }[]'.
  Cannot assign type 'T' to type '{ [key: string]: string; }'.ts(2345)

最后，我希望 outputRowsItems 与 TableRowsCells 具有相同的类型，即 Array<T>

你能帮我解决这些错误吗？

Playground link

感谢

Answer 1

要保留输入的类型，您需要为 filterRows

使用泛型类型参数

function filterRows<T extends Record<keyof T, string>>(
  rows: Array<T>,
  searchKey: string
) {
  return rows.filter((obj) =>
    Object.keys(obj).some((key) => obj[key as keyof T].toString().includes(searchKey))
  );
}

Playground Link

Answer 2

你可以这样做 -

type TableRowsCells = Array<Record<string, string | number>>;
type SearchKey = string;

type EnhancedTableProps = {
  TableRowsCells: TableRowsCells,
  searchKey?: SearchKey;
};

function filterRows(
  rows: TableRowsCells,
  searchKey: SearchKey
) {
  return rows.filter((obj) =>
    Object.keys(obj).some((key) => obj[key].toString().includes(searchKey))
  );
}

function EnhancedTable({ TableRowsCells, searchKey }: EnhancedTableProps) {
  /** Code stuff...**/

  let outputRowsItems = TableRowsCells;
  if (typeof searchKey === 'string' && searchKey.length > 2) {
    outputRowsItems = filterRows(TableRowsCells, searchKey);
  }

  /** Code stuff...**/
}

Playground Link

Typescript 无法分配类型 '{ [key: string]: string; }[]' 键入 'T[]'

Typescript Cannot assign type '{ [key: string]: string; }[]' to type 'T[]'

type-inference

type-conversion

typeerror

typescript

reactjs