【TypeScript】「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

自分用の備忘録です～

表題にあるように「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることは...」と言われるときは、以下のようにしてしまっているときではないでしょうか？

type DataType = "animal" | "plant" | "fish";

const TabLabels: { [key: DataType]: string } = {
  animal: "動物",
  plant: "植物",
  fish: "魚",
};

以下のように修正すればokです。

type DataType = "animal" | "plant" | "fish";

const TabLabels: { [key in DataType]: string } = {
  animal: "動物",
  plant: "植物",
  fish: "魚",
};

以上！