JavaScript/TypeScriptで「An index signature parameter type cannot be a union type」エラーを解決する

インデックスシグネチャのパラメータ型がユニオン型にできない理由と解決策

// エラーが発生する例
const obj: { [key: string | number]: string } = {
  name: "John Doe",
  age: 30,
  // エラー: "An index signature parameter type cannot be a union type. Consider using a mapped object type instead."
};

このエラーは、インデックスシグネチャのパラメータ型がユニオン型であることが原因です。

インデックスシグネチャとは、オブジェクトリテラル型のキーと値の型を定義する構文です。上記の例では、string | number型のキーを持つオブジェクトリテラル型を定義しようと試みています。しかし、TypeScriptはユニオン型のキーを持つオブジェクトリテラル型をサポートしていません。

このエラーを解決するには、マップされたオブジェクト型を使用する必要があります。マップされたオブジェクト型は、キーと値の型を個別に定義できる構文です。

// 解決策: マップされたオブジェクト型を使用する
const obj: { [key in string | number]: string } = {
  name: "John Doe",
  age: 30,
};

// エラーは発生しない

上記の例では、stringまたはnumber型のキーを持つオブジェクトリテラル型を定義しています。key in string | numberという構文は、キーがstring型またはnumber型のいずれかであることを意味します。

マップされたオブジェクト型を使用することで、より柔軟なオブジェクトリテラル型を定義することができます。

マップされたオブジェクト型を使用する利点は以下のとおりです。

• ユニオン型を含む複雑なキーを持つオブジェクトリテラル型を定義できる
• コードの可読性と保守性を向上できる
• TypeScriptコンパイラによる型チェックの恩恵を受けられる

インデックスシグネチャのパラメータ型がユニオン型の場合

// エラーが発生する例
const obj: { [key: string | number]: string } = {
  name: "John Doe",
  age: 30,
  // エラー: "An index signature parameter type cannot be a union type. Consider using a mapped object type instead."
};

マップされたオブジェクト型を使用する

// 解決策: マップされたオブジェクト型を使用する
const obj: { [key in string | number]: string } = {
  name: "John Doe",
  age: 30,
};

// エラーは発生しない

文字列リテラルのユニオン型

const obj: { [key in "name" | "age"]: string } = {
  name: "John Doe",
  age: 30,
};

インターフェースとマップされたオブジェクト型

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

const obj: { [key in keyof Person]: string } = {
  name: "John Doe",
  age: "30", // 型エラー: number型をstring型に変換できない
};

オプショナルプロパティ

const obj: { [key in string | number]?: string } = {
  name: "John Doe",
  // age: 30, // オプショナルプロパティなので省略可能
};

インデックスシグネチャのパラメータ型がユニオン型の場合の解決策

条件分岐を使用する

const obj: { [key: string]: string } = {} as any;

if (typeof key === "string") {
  obj[key] = value;
} else {
  // エラー: "key" は "string" 型ではない
}

この方法は、キーの型がstring型であることを確認してから値を設定することで、エラーを回避できます。しかし、コードが冗長になり、可読性が低下する可能性があります。

Record型を使用する

const obj: Record<string, string> = {
  name: "John Doe",
  age: "30",
};

Record型は、キーと値の型を指定してオブジェクトリテラル型を定義できる型です。この方法は、マップされたオブジェクト型と同様の機能を提供しますが、より簡潔なコードを書くことができます。

ただし、Record型はTypeScript 2.8以降でしか使用できません。

const obj: { [key: string]: string } = Object.entries({
  name: "John Doe",
  age: 30,
}).reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {} as { [key: string]: string });

Object.entries()を使用してオブジェクトリテラル型を生成する方法もあります。この方法は、キーと値のペアを配列に変換してから、reduce()を使用してオブジェクトリテラル型に変換します。

しかし、この方法は複雑で、可読性が低い可能性があります。

const keys: string[] = ["name", "age"];

const obj: { [key in typeof keys[number]]: string } = {
  name: "John Doe",
  age: "30",
};

keyofを使用して、許可されるキーのリストを定義する方法もあります。この方法は、コードの可読性を向上させることができます。

ただし、キーのリストが動的に変化する場合は、この方法は適切ではありません。

どの方法が最適かは、ユースケースによって異なります。マップされたオブジェクト型は、多くの場合、最もシンプルで効率的な解決策ですが、他の方法も検討する価値があります。