typeofとkeyofの組み合わせ
型演算子を連結して、正確な型を導出します。
「typeofとkeyofの組み合わせ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
強力な組み合わせ
単独では、typeofは値から型を導出し、keyofは型のキーを列挙します。これらを組み合わせたkeyof typeof valueは、値が実際に持つキーのユニオン型を生成し、完全に型安全なアクセスを可能にします。
keyof typeofの実践
まずconstオブジェクトを用意し、typeofでその型を取得してから、keyofでキーを列挙します。結果は、オブジェクトが持つリテラルキー名のユニオン型になります。
const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])このパターンが存在する理由
実行時のオブジェクトはあっても、それに対応する別個のインターフェースがないことはよくあります。keyof typeofを使えば、オブジェクトの構造を手書きの型として重複して定義せずに、キーの型を取得できます。
const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2キーによる型安全なアクセス
keyof typeof objとして型付けした関数パラメーターは、コンパイル時に無効なキーを拒否します。そのため、内部のインデックスアクセスも必ず安全になります。
const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key列挙型のような定数オブジェクト
よく使われるイディオムは、as constオブジェクトを擬似的な列挙型として定義し、そこからキーの型と値の型の両方を導出する方法です。
const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)キーと値の違い
この違いに注意してください。keyof typeof objはキー名を返し、typeof obj[keyof typeof obj]は値の型を返します。APIに必要な方を選択してください。
const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)ジェネリックなgetProperty
典型的な型安全ゲッターでは、K extends keyof Tでキーのパラメーターを制約し、T[K]を返します。そのため、結果の型はルックアップしたプロパティと正確に一致します。
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)キーに応じた戻り値の型
戻り値がT[K]であるため、各呼び出しの結果の型は渡された具体的なキーに応じて変わります。あるキーでは数値になり、別のキーでは文字列になります。
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id") // number
const nm = getProperty(u, "name") // string
console.log(id, nm)無効なキーは拒否される
オブジェクトに存在しないキーを渡すと、コンパイルエラーになります。ジェネリック制約によって、コードが実行される前に不正なキーが排除されます。
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))型安全なセッター
同じ仕組みでセッターも構築できます。値のパラメーターがT[K]になるため、そのキーに対して正しい型の値だけを代入できます。
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)仕組みを組み合わせる
keyof typeofパターンとジェネリックなT[K]アクセスを組み合わせると、実際のオブジェクトに対する安全で再利用可能なユーティリティを作れます。これは、型付き設定リーダーやルックアップ、フォームヘルパーの基盤になります。
const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
return theme[name]
}
console.log(color("danger")) // #f00理解度チェック
typeofとkeyofの組み合わせについての理解度を確認しましょう。
まとめ
keyof typeof valueは、別個のインターフェースを記述せずに値が実際に持つキーのユニオン型を導出し、インデックスアクセスを型安全にします。キーの型（keyof typeof obj）と値の型（typeof obj[keyof typeof obj]）を区別してください。ジェネリックパターンgetProperty<T, K extends keyof T>(obj, key): T[K]は、ルックアップした型を正確に返し、コンパイル時に無効なキーを拒否します。
よくある質問
「typeofとkeyofの組み合わせ」レッスンは無料ですか？
はい。「typeofとkeyofの組み合わせ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「typeofとkeyofの組み合わせ」で何を学びますか？
型演算子を連結して、正確な型を導出します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「typeofとkeyofの組み合わせ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- typeof型演算子
- keyof型演算子
- インデックスアクセス型
- typeofとkeyofの組み合わせ