TypeScript インデックスシグニチャ

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

index.ts

interface FruitStock {
  [i: string]: number
}

// アクセスされるキーがstring型であるとき、常にnumber型の値を返すという構造を表現している。

const fruit: FruitStock = {}
fruit.apple = 3
fruit.orange = 5

// fruit.banana = 'many'
// 型 'string' を型 'number' に割り当てることはできません。

テンプレート文字列リテラル

index.ts

interface Product {
  [key: `product_${number}`]: string
}

const productA: Product = {
  product_1: 'foo',
  product_2: 'bar',
  product_10: 'baz',
}

const productB: Product = {
  product_1: 'foo',
  product_2: 'bor',
  // product_dx: 'baz', // Error
  // オブジェクト リテラルは既知のプロパティのみ指定できます。'product_dx' は型 'Product' に存在しません。
}

 上記の例では、productBのproduct_dxというキーはProductインターフェイスのインデックスシグニチャのパターンに合致していないため、TypeScriptはエラーを報告する。

 TypeScriptにおいて、遺ンデックスシグニチャで型定義されたオブジェクトにおいては、定義されていないプロパティへのアクセスがコンパイル時にエラーとならず、実行時にはundefinedとなる。これはインデックスシグニチャがオブジェクトが任意のプロパティ名を持つ可能性があると宣言しているため。

 インデックスシグニチャは便利な機能だが、オブジェクトのプロパティがあらかじめ定義できる場合は、より具体的なプロパティの型定義を使用した方が適切。いンデックスシグニチャは、動的にプロパティ名が変わる可能性がある場合や、外部のデータソース(APIの応答など)を扱う際に、プロパティ名が事前に定義されていないオブジェクトを型付けするのに最も適している。