keyof型演算子
keyofを使ってオブジェクト型のキーのユニオンを取得します。
「keyof型演算子」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
型のキー
keyof演算子はオブジェクト型を受け取り、そのプロパティキーの共用体を生成します。これは、型安全なプロパティアクセスやジェネリックなキー用ユーティリティの基盤です。
基本的なkeyof
インターフェースにkeyofを適用すると、キー名を文字列リテラル型とする共用体を取得できます。
interface User {
id: number
name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)有効なキーのみ許可される
keyof T型の変数には、Tに実際に存在するキーのいずれかだけを格納できます。タイプミスや無効なキーはコンパイル時に検出されます。
interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)typeofとkeyof
typeofと組み合わせると、値から推論された型のキーを取得できます。ここではインターフェースを記述せずに、設定オブジェクトのキーを取得しています。
const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])文字列インデックスシグネチャのkeyof
文字列インデックスシグネチャを持つ型では、keyofはstring | numberになります。任意の文字列キーが許可され、数値キーは文字列に変換されるためです。
type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)数値インデックスシグネチャのkeyof
数値インデックスシグネチャでは、keyofはnumberだけになります。これは、配列が数値インデックスを公開する仕組みと一致します。
type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)配列型のkeyof
配列型にkeyofを適用すると、意外な共用体が得られます。数値インデックスに加えて、lengthやpushなど、配列のすべてのメソッド名とプロパティ名が含まれます。
type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)キーを安全に反復する
keyofを使うと、有効なキーだけを操作するループを記述できます。Object.keysを(keyof T)[]にキャストすると、インデックスアクセスの型安全性を保てます。
interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])ジェネリック制約でのkeyof
ジェネリックなキーのパラメータには、通常K extends keyof Tという制約を付けます。これにより、そのキーがオブジェクトに実際に存在することが保証されます。
function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const name = pluck({ id: 1, name: "Ada" }, "name")
console.log(name) // Ada複数のキーを組み合わせる
keyof Tは共用体なので、交差させたりフィルタリングしたりできます。ここでは、関数が有効なキーの配列を受け取ります。
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
const out = {} as Pick<T, K>
for (const k of keys) out[k] = obj[k]
return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))keyofが重要な理由
keyofはプロパティ名を検査可能な型に変換します。これにより、存在しないキーを参照できないジェネリックなゲッター、セッター、マッパーを作成できます。高度なTypeScriptでは、至るところで使われます。
interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))理解度チェック
keyof演算子についての理解度を確認してください。
まとめ
keyof Tは、Tのプロパティキーをリテラル型の共用体として生成し、変数を有効なキーに制限します。文字列インデックスシグネチャではstring | numberを、数値インデックスシグネチャではnumberを返します。typeofと組み合わせると値からキーを導出でき、ジェネリック（K extends keyof T）と組み合わせると、型安全なゲッター、ピッカー、反復処理を実現できます。
よくある質問
「keyof型演算子」レッスンは無料ですか？
はい。「keyof型演算子」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「keyof型演算子」で何を学びますか？
keyofを使ってオブジェクト型のキーのユニオンを取得します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「keyof型演算子」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。