🔍

SwitchをやめてObject Lookupsを使おう

2022/02/26に公開

TypeScript (JavaScript) のswitchはbreakやdefaultを書き忘れがちという問題がある。if elseでもswitchと同じことはできるけどコードが煩雑になりやすい。

Lookup Tableを使ったほうがいい場面がけっこうある。

Object LookupsはTypeScript(JavaScript)のObjectを使ってLookup Tableを作り、switchやif elseと同じフローを実現するテクニック。

Object Lookups over Switch Statements and If/Else Conditionals

JavaScriptでも便利なテクニックなのだが、TypeScriptだとさらに便利。というのも、Mapped Types ([key in Type]: T)を併用することでケースの網羅しそこないを防ぐことができるのだ。

Object Lookupsは以下のように使える。


const OBJ = {
  A: 'avalue',
  B: 'bvalue',
} as const;
type ObjKeyType = keyof typeof OBJ;
type ObjValType = typeof OBJ[ObjKeyType];

const objCase: { [key in ObjValType]: () => string } = {
  [OBJ.A]: () => {
    return `AAA: ${OBJ.A}`;
  },
  [OBJ.B]: () => {
    return `B: ${OBJ.B}`;
  },
};
console.log(objCase[OBJ.A]());

もしも上のコードから[OBJ.B]のケースを消すと、TypeScriptのコンパイルに失敗するので網羅し忘れていたことにすぐ気がつく。

VSCode TS error

ちなみにOBJ.AとOBJ.Bの型が異なっても問題ない。ObjValTypeはOBJ.AとOBJ.BのUnion型になる。

このテクニックを書いた記事を探してみたけども意外と見つからなかった。

Discussion