動的キーのJSONオブジェクトをTypeScriptインデックスシグネチャに変換する

JSONの動的キー

一部のJSONオブジェクトは動的キーを使用します。事前にはわからないが、パターンに従うキーです。辞書、ルックアップテーブル、ロケールマップなどが一般的な例です。

JSON例

{
  "translations": {
    "en": "Hello",
    "ja": "こんにちは",
    "es": "Hola",
    "fr": "Bonjour"
  },
  "userScores": {
    "user_001": 95,
    "user_002": 82,
    "user_003": 71
  }
}

生成されるTypeScript

interface Root {
  translations: { [key: string]: string };
  userScores: { [key: string]: number };
}

インデックスシグネチャの構文

インデックスシグネチャは、キーと値が指定された型に一致する限り、オブジェクトが任意の数のプロパティを持てることをTypeScriptに伝えます：

{ [key: string]: ValueType }

Record<K, V>の使用

Recordユーティリティ型は同等で、可読性の面でよく好まれます：

interface Root {
  translations: Record<string, string>;
  userScores: Record<string, number>;
}

キー型の絞り込み

可能なキーがわかっている場合、ユニオンで絞り込みます：

type Locale = "en" | "ja" | "es" | "fr";

interface Root {
  translations: Record<Locale, string>;
}

これにより、ユニオンにないキーへのアクセス時にコンパイル時エラーが発生し、網羅性チェックが有効になります。

混合構造

オブジェクトが既知のプロパティと動的プロパティの両方を持つ場合があります：

interface Config {
  version: string;
  [key: string]: string | number;
}

注意：インデックスシグネチャはすべてのプロパティのスーパータイプでなければなりません。ここではversion: stringがstring | numberと互換性があるため、動作します。

使用すべき場合

ルックアップテーブル、辞書、i18nマップ、およびキーのセットがスキーマ駆動ではなくデータ駆動である構造にインデックスシグネチャを使用します。