时间戳

首页 > 解决方案 > 带有 React 的 TypeScript - 'string' 类型的参数不可分配给'keyof T' 类型的参数

reactjs - 带有 React 的 TypeScript - 'string' 类型的参数不可分配给'keyof T' 类型的参数

问题描述

我有一个使用 TypeScript 和 React Hooks 构建的排序功能，但我遇到了一些问题。

具体来说，我收到一条错误消息：

Argument of type 'string' is not assignable to parameter of type 'keyof T'.
  Type 'string' is not assignable to type 'never'.ts(2345)

您可以在 CodeSandbox 上查看排序功能以及我如何尝试对其进行测试

我不太确定never会从哪里来。

任何有用的链接将不胜感激。

我会尝试删除一些不必要的代码，但我有一个坏习惯，即删除代码会改变上下文（使用 TypeScript 时），这会导致答案可能对我的用例没有帮助。

import { useState, useEffect } from "react";

export function SortByKey<T extends object>({
  data,
  sortKey
}: {
  data: T[];
  sortKey: keyof T;
}) {
  let sortable = [...data];

  sortable.sort((a: T, b: T) => {
    if (a[sortKey] < b[sortKey]) {
      return -1;
    }
    if (a[sortKey] > b[sortKey]) {
      return 1;
    }
    return 0;
  });

  return sortable;
}

export default function App<T extends object>({ data }: { data: T[] }) {
  const [sortedData, setSortedData] = useState(data);

  const sortKeys: string[] = Object.keys(data[0]);

  function handleClick(sortKey: keyof T) {
    setSortedData(SortByKey({ data, sortKey }));
  }

  useEffect(() => {
    console.log(sortedData);
  }, [sortedData]);

  return (
    <div>
      {sortKeys.map((sortKey) => {
        return (
          <button key={sortKey} onClick={() => handleClick(sortKey)}>
            {sortKey}
          </button>
        );
      })}
    </div>
  );
}

标签： reactjstypescript

解决方案

用 替换object“App<T extends object>” Record<string, any>，即：

export default function App<T extends Record<string, any>>({ data }: { data: T[] }) {

这将使handleClickbutton.onClick 停止抛出错误。

为什么：因为当你请求 的键时object，它们默认是空的，也没有索引签名。

推荐阅读