0Pricing
TypeScript Academy · レッスン

keyofとインデックスアクセス型

keyofとT[K]でオブジェクトのプロパティ型に動的にアクセスします。

「keyofとインデックスアクセス型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

keyofは、オブジェクト型のプロパティ名からなるユニオンを生成します。インデックスアクセス型（T[K]）は、特定のプロパティキーに対応する型を取得します。

keyofの基本

keyof Tは、Tのすべてのプロパティ名の型からなるユニオンを返します。
interface User { id: number; name: string; email: string; }
type UserKeys = keyof User; // 'id' | 'name' | 'email'

インデックスアクセス：T[K]

T[K]を使用すると、型TにおけるプロパティKの型を取得できます。
type IdType = User['id'];   // number
type NameType = User['name']; // string

動的なプロパティアクセス

keyofとジェネリクスを組み合わせて、型安全なプロパティアクセサー関数を作成します。
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const name = getProperty(user, 'name'); // string

typeofとkeyof

値にtypeofを使用し、その後にkeyofを使用すると、インターフェースを宣言せずに値のプロパティ名を取得できます。
const config = { host: 'localhost', port: 3000 };
type ConfigKey = keyof typeof config; // 'host' | 'port'

インデックスアクセス型のユニオン

キーのユニオンで型をインデックスすると、それらの値の型からなるユニオンを取得できます。
type NumericValues = User['id' | 'age']; // number | number = number

配列に対するkeyof

配列型に対するkeyofは、配列のインデックス型に加えて、配列のメソッド名も返します。
type ArrKey = keyof string[]; // number | 'length' | 'push' | ...
type Element = string[][number]; // string

再帰的なインデックスアクセス

インデックスアクセス型を連鎖させて、入れ子になったオブジェクトを扱います。
type Address = { city: string; zip: string };
type Profile = { address: Address };
type City = Profile['address']['city']; // string

keyofによる制約

K extends keyof Tをジェネリック制約として使用すると、KがTの有効なキーであることを保証できます。
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value;
}

マップ型でのkeyofの使用

マップ型はkeyof Tを反復処理して、オブジェクト型を変換します。
type Readonly2<T> = { readonly [K in keyof T]: T[K] };

条件型でのkeyof

keyofは、特定のキーグループを抽出する条件型で強力な効果を発揮します。
type StringKeys<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];

確認問題

`interface User { name: string }`の場合、`User['name']`は何を返しますか？

まとめ

keyofはプロパティ名をユニオン型として抽出します。T[K]はキーに対応する型を取得します。これらを組み合わせることで、型安全なプロパティアクセス、マップ型、条件型ユーティリティが実現します。

よくある質問

「keyofとインデックスアクセス型」レッスンは無料ですか？

はい。「keyofとインデックスアクセス型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「keyofとインデックスアクセス型」で何を学びますか？

keyofとT[K]でオブジェクトのプロパティ型に動的にアクセスします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「keyofとインデックスアクセス型」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. keyofとインデックスアクセス型
  2. ジェネリック制約：型パラメーターの絞り込み
  3. 条件型：T extends U ? X : Y
  4. 分配条件型
← TypeScript Academyに戻る