【Typescript】良い加減 keyof typeof について理解する

TypeScript を書いていると keyof typeof という表現や、その組み合わせを目にすることが多いと思います。
自分も「なんとなく分かった気になっていたけど、ちゃんと説明しようとするとモヤッとする…」という状態が続いていました。
特に keyof typeof の組み合わせは、実務で オブジェクトのキーを型として取得し、その値の型をユニオン型として安全に扱う ために頻繁に使われます。

なので、今回 ちゃんと理解しよう！ と思い、いろいろと調べたり試したりしました。

せっかくなので、学んだことをまとめてみます！
同じように「keyof typeof よく見るけど、ちょっとよく分かってないかも…」という方の参考になれば嬉しいです。

---

🔍 keyof typeof って何？

まずは keyof と typeof のそれぞれの役割を整理してみます。
自分は名前から役割をうまくイメージできなかったので覚えるのに苦労しました。

---

🔹 1. typeof とは？

typeof は 「変数やオブジェクトの型を取得する」 ために使います。

const person = {
  id: "123",
  fullName: "Alice",
  age: 25,
};

// person の型を取得
type PersonType = typeof person;

PersonType はこうなります。

type PersonType = {
  id: string;
  fullName: string;
  age: number;
};

つまり、typeof を使うと その変数の型をそのまま取れる！ ということですね。

---

🔹 2. keyof とは？

keyof は 「オブジェクトのキーを型として取得する」 ものです。

type PersonKeys = keyof PersonType;

この場合、PersonKeys はこうなります。

type PersonKeys = "id" | "fullName" | "age";

PersonType のキーを列挙したユニオン型になります。
これを使うと「オブジェクトのプロパティ名だけを型として使いたい」といった場面で便利です。

---

🔹 3. keyof typeof を組み合わせると…？

ここまで来たら keyof typeof の意味が見えてきます。

例えば、オブジェクトのキーを取得し、その値を型として扱いたい場面があります。

const STATUS_CODES = {
  success: 200,
  notFound: 404,
  unauthorized: 401,
} as const;

// keyof typeof を使ってキーの型を取得
type StatusCodeKeys = keyof typeof STATUS_CODES; // "success" | "notFound" | "unauthorized"

// keyof typeof を使って値の型を取得
type StatusCodeValues = (typeof STATUS_CODES)[StatusCodeKeys]; // 200 | 404 | 401

✅ 何が嬉しいのか？

• StatusCodeKeys は "success" | "notFound" | "unauthorized" のユニオン型になる。
• StatusCodeValues は 200 | 404 | 401 のユニオン型になり、型が自動的にオブジェクトの値に追従する。
• 新しいキーや値を追加しても型が自動更新される ため、手動で型を修正する手間がなくなる。

このパターンは、APIのレスポンスや設定値の型定義によく使われます。

---

🚀 keyof typeof を理解して TypeScript をもっと楽に！

最初は「keyof typeof って何者…？」と思っていたけど、実際に分解してみると意味がわかるようになりました。
TypeScript、ちょっとずつでも深掘りしていくと、書くのがどんどん楽しくなりますね！🔥

ではまた！👋