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

質問

オブジェクトの配列からHTMLテーブルを生成する、以下のReactコンポーネントを持っています。表示されるべき列は tableColumns プロパティで定義されています。

をループする場合 items をループし、正しいカラムを表示するために、私は key プロパティから tableColumn オブジェクトになります ( {item[column.key]} ) を作成しましたが、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>
  );
}

どのように解決するのですか？

  items: object[],

技術的には JavaScript のオブジェクトですが、型はより良いものになります。Typescript がオブジェクトのプロパティにアクセスする際の間違いを正しく認識できるようにするには、オブジェクトの正確な形状を伝える必要があります。もしあなたがそれを object とタイプした場合、typescript はそれを助けることができません。その代わりに、オブジェクトが持つ正確なプロパティとデータ型を伝えることができます。

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

さて、オブジェクトがあらゆる種類のキーと値のペアを含むことができる場合、少なくともオブジェクトのインデックスタイプを使用することで、typescriptに値（とキー）がどのようなタイプであるかを伝えることができます。

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

というのが、与えられたケースでの正確な型でしょう。