【TypeScript】インデックス型（index signature）の使い方

今回は、TypeScriptのインデックス型について調べてみました。

インデックス型とは

インデックス型とは何でしょうか。

サバイバルTypeScriptでは下記の記述があります。

TypeScriptで、オブジェクトのフィールド名をあえて指定せず、プロパティのみを指定したい場合があります。そのときに使えるのがこのインデックス型(index signature)です。

下記のように定義されます。

type IndexSignatureType = {
  [key: KeyType]: ValueType;
}

KeyType はプロパティ名の型を表しており、string 、number 、symbol のみ指定可能です。
ValueType はプロパティの型を表しており、任意の型を指定可能です。

これにより、オブジェクトにおいてキーの名前が事前に決まっていない場合や、複数のプロパティが同じ型を持つ場合に、特定のキーの型や値の型を指定できます。

具体的な使用例

では、具体的にどのような場面で使用すればよいのでしょうか。
今回はAIに具体例を提示してもらいました。

①言語の翻訳データ

インデックス型を使用することで、特定の型に統一された多数のプロパティを持つオブジェクトを定義することができます。

下記は言語の翻訳データを作成する例です。
キーに言語コード、値に翻訳文字列を設定しています。

type Translation = {
  [key: string]: string;
};

const translations: Translation = {
  en: "Hello",
  ja: "こんにちは",
  es: "Hola",
  fr: "Bonjour",
};

console.log(translations["ja"]); // "こんにちは"

②APIレスポンスの型定義

動的なデータを扱う場合に役立ちます。

下記はAPIレスポンスの型を定義する例です。
プロパティの型をユニオン型で定義しています。

type APIResponse = {
  [key: string]: string | number | boolean;
};

const response: APIResponse = {
  status: "success",
  code: 200,
  isAuthenticated: true
};

おわりに

インデックス型を使用することで、柔軟にオブジェクトを設計でき、
安全性も担保できる点が強みかなと思います。

それでは。

参考文献