'string' 不能用于索引类型 '{}'

Question

我有以下 React 组件，可从对象数组生成 HTML 表。应该显示的列是通过tableColumns属性定义的。

当循环items并显示正确的列时，我必须使用对象 ( ) 中的key属性，但打字稿生成以下错误：tableColumn{item[column.key]}

元素隐式具有 'any' 类型，因为类型 'string' 的表达式不能用于索引类型 '{}'。在类型“{}”上找不到带有“字符串”类型参数的索引签名。

我能做些什么来解决这个问题？我迷路了

我如何调用组件：

<TableGridView
  items={[
    {
      id: 1,
      name: 'John Doe',
      email: 'john@doe.de'
    },
    {
      id: 2,
      name: 'Lorem ipsum',
      email: 'lorem@ipsum.com',
    }
  ]}
  tableColumns={[
    {
      key: 'id',
      label: 'ID',
    },
    {
      key: 'name',
      label: 'Name',
    }
  ]}
/>

我的组件：

export type TableColumn = {
  key: string,
  label: string,
};

export type TableGridViewProps = {
  items: object[],
  tableColumns: TableColumn[]
};

const TableGridView: React.FC<TableGridViewProps> = ({ tableColumns, items }) => {
  return (
    <table>
      <tbody>
        {items.map(item => {
          return (
            <tr>
              {tableColumns.map((column, index) => {
                return (
                  <td
                    key={column.key}
                    className="lorem ipsum"
                  >
                    {item[column.key]} // error thrown here
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Answer 1

  items: object[],

虽然从技术上讲它是一个 JavaScript 对象，但类型可以更好。为了让 Typescript 在访问对象属性时正确帮助您识别错误，您需要告诉它对象的确切形状。如果您将其键入为object，则打字稿无法帮助您。相反，您可以告诉它对象具有的确切属性和数据类型：

  let assistance: { safe: string } = { safe: 1 /* typescript can now tell this is wrong */ };
  assistance.unknown; // typescript can tell this wont really work too

现在，如果对象可以包含任何类型的键/值对，您至少可以通过使用对象索引类型告诉打字稿值（和键）具有什么类型：

 items: {
   [key: string]: number | string,
  }[]

在给定的情况下，这将是准确的类型。

Answer 2

使用泛型

// bad
const _getKeyValue = (key: string) => (obj: object) => obj[key];

// better
const _getKeyValue_ = (key: string) => (obj: Record<string, any>) => obj[key];

// best
const getKeyValue = <T extends object, U extends keyof T>(key: U) => (obj: T) =>
      obj[key];

不好 - 错误的原因是object默认情况下类型只是一个空对象。因此不可能使用string类型来索引{}。

更好 - 错误消失的原因是因为现在我们告诉编译器obj参数将是字符串/值 ( string/any) 对的集合。但是，我们正在使用该any类型，因此我们可以做得更好。

最佳 -T扩展空对象。U扩展T. 因此U将始终存在于T，因此它可以用作查找值。

这是一个完整的例子：

我已经切换了泛型的顺序（U extends keyof T现在在之前T extends object）以强调泛型的顺序并不重要，您应该选择一个对您的函数最有意义的顺序。

const getKeyValue = <U extends keyof T, T extends object>(key: U) => (obj: T) =>
  obj[key];

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Smith",
  age: 20
};

const getUserName = getKeyValue<keyof User, User>("name")(user);

// => 'John Smith'

Answer 3

如果它是一个迂腐的 javascript 对象，对每个字段创建类型定义没有意义，并且作为类定义也没有意义，那么您可以键入对象，any并且 typescript 会让您随意索引。

前任。

//obviously no one with two brain cells is going to type each field individually
let complicatedObject: any = {
    attr1: 0,
    attr2: 0,
    ...
    attr999: 0
}

Object.keys(complicatedObject).forEach(key => {
    complicatedObject[key] += 1;
}

Answer 4

首先，将类型定义items为数组objects是一个坏主意，因为它违背了 Typescript 的目的。而是定义数组将包含什么类型的对象。我会这样做：

type Item = {
  id: number,
  name: string,
  email: string,
}

export type TableGridViewProps = {
  items: Item[],
  tableColumns: TableColumn[]
};

之后，如果您绝对确定key将存在于 中item，则可以执行以下操作来告诉 Typescript 您正在访问有效索引。

<td
  key={column.key}
  className="lorem ipsum"
>
  {item[column.key as keyof typeof Item]}
</td>