keyofとtypeof

なぜ学ぶか： keyof typeof COLORS — AIのコードにたまに出るこの呪文、初見では読めませんが、分解すると2段階の変換をしているだけです。例で種明かしします。

まずはこの例を見てみましょう

const COLORS = {
  primary: "#2563eb",
  success: "#16a34a",
} as const;

// 右から読む: 「COLORS という値の → 型の → キー一覧」
type ColorName = keyof typeof COLORS; // "primary" | "success"

const c: ColorName = "primary";   // OK
// const bad: ColorName = "warning"; // ← COLORS に無いのでエラー

keyof typeofは右から読みます。「値 → 型 → キーの一覧」の2段変換です。