web-dev-qa-db-ja.com

'string'はタイプ '{}'のインデックスに使用できません

オブジェクトの配列からHTMLテーブルを生成する次のReactコンポーネントがあります。表示する必要のある列は、tableColumnsプロパティによって定義されます。

itemsをループして正しい列を表示する場合、keyオブジェクト（{item[column.key]}）のtableColumnプロパティを使用する必要がありますが、TypeScriptで次のエラーが生成されます。

タイプ「string」の式はタイプ「{}」の索引付けに使用できないため、要素は暗黙的に「any」タイプを持っています。タイプ 'string'のパラメーターを持つインデックス署名がタイプ '{}'で見つかりませんでした。

これを修正するにはどうすればよいですか？道に迷いました

コンポーネントを呼び出す方法：

<TableGridView
  items={[
    {
      id: 1,
      name: 'John Doe',
      email: '[email protected]'
    },
    {
      id: 2,
      name: 'Lorem ipsum',
      email: '[email protected]',
    }
  ]}
  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>
  );
}
javascriptreactjstypescript
11
Max Tommy Mitschke
  items: object[],

それは単なる悪いタイプです。代わりに正確に入力してください。例：

 items: {
   [key: string]: number | string,
  }[]
8
Jonas Wilms

変更してみてください：

  items={[
    {}
  ]}

に：

  items=[
    {}
  ]

これは想定される出力ですか？

1
John Doe
2
Lorem ipsum

私はそれを手に入れました。

1
Lucas Vazquez