TypeScriptのkeyofが便利

最近、仕事でTypeScriptを触ることが増えてきました。
まだまだ型に慣れず、なんでlinterに怒られるのかわからないことも多いのですが、少しずつ慣れてきています。

そんな感じでちょこちょこTypeScriptを触っている途中、keyofという便利なものを知ったので、そのメモです。

少し大きめのプログラムを書いていると何かのコード表的なものを表現したくなる時が出てきます。
例えば、色コードなどをReactでコンポーネントを作成した時、コンポーネントの色を指定させるのに直接、FF0000とか記述していくのは抵抗があると思いますが、Redとかになってると使いやすいかと思います。

そういう時にkeyofを使うとすごく便利でした。

下にサンプルを示します。

const Colors = {
  Red: "#FF000",
  Green: "#00FF00",
  Blue: "#0000FF",
}
type Color = keyof typeof Colors;

const selectColor = (color: Color): string => Colors[color];

console.log(selectColor('Blue'));   // #0000FFが表示される。yellowとするとエラー

keyof typeof ColorsのところでColorsのキーをそのまま型として定義しているということです。
下と同じ定義をkeyofを使うことで実現出来ているわけです。

type Color = "Red" | "Green" | "Blue"

なので、selectColorの引数にYellowとか指定してもエラーとなります。

知れば知るほど便利な言語であることがわかります。