🤔

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

2025/03/21に公開

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、ちょっとずつでも深掘りしていくと、書くのがどんどん楽しくなりますね！🔥
ではまた！👋

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

🔍 `keyof typeof` って何？

🔹 1. `typeof` とは？

🔹 2. `keyof` とは？

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

✅ 何が嬉しいのか？

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

Discussion