TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

TypeScriptを指定してオブジェクトのキーに自由な値を指定するためのインデックス シグネチャという機能が用意されています。

type Bar = {
  [key: string]: number
}
// OK
const bar01: Bar = {
  aaa: 1
}
// OK
const bar02: Bar = {
  bbb: 1,
  ccc: 2
}

このままではキー使える文字列に制約がありませんのでユニオンタイプなどを利用して制約を入れようとしてもうまくいきません

type Foo = 'aaa' | 'bbb'
type Bar = {
  [key: Foo]: number
}

パラメーターの型にはユニオンタイプではなくマップされたオブジェクト型に変更して以下のようにすれば指定することができます。

type Foo = 'aaa' | 'bbb'
type Bar = {
  [key in Foo]: number
}
// OK
const bar01: Bar = {
  aaa: 1,
  bbb: 2
}
// NG
const bar02: Bar = {
  ccc: 1,
  eee: 2
}
// NG
const bar03: Bar = {
  aaa: 1,
  bbb: 2,
  ccc: 3
}

この場合はユニオンタイプで指定されたすべての値をキーに持つオブジェクトしか作れませんがオプショナルプロパティ(?のこと)を利用することで任意のキーを持つオブジェクトを指定することができます。

type Foo = 'aaa' | 'bbb'
type Bar = {
  [key in Foo]?: number
}
// OK
const bar01: Bar = {
  aaa: 1,
  bbb: 2
}
// OK
const bar02: Bar = {
  aaa: 1,
}
// NG
const bar03: Bar = {
  aaa: 1,
  bbb: 2,
  ccc: 3
}

スポンサードリンク

«GatsbyJSで "WebpackError: ReferenceError: IDBIndex is not defined"とエラーが出た場合の対処方法 | メイン | ReactのuseRefを再描画がかからないState管理として利用する»