0Pricing
TypeScript Academy · レッスン

keyofとインデックスアクセス型（入門）

keyofでプロパティ名のunionを作り、インデックスアクセス型（T[K] / T["prop"]）でプロパティの型を安全に取得します

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

導入

目標：keyof（プロパティ名のユニオン）とインデックスアクセス（T[K]）を使ってプロパティの型を読み取り、より安全なヘルパーを作成します。

keyof

keyofは、型のプロパティ名のユニオンを生成します（例："id" | "name" | "email"）。

interface User {
  id: number;
  name: string;
  email?: string;
}

type UserKeys = keyof User;  // "id" | "name" | "email"

keyof typeof

keyof typeofを使うと、値（オブジェクト）からキーを取得して、パラメーターの型付けに利用できます。

const SETTINGS = {
  theme: "dark",
  lang: "en",
} as const;

type SettingKey = keyof typeof SETTINGS; // "theme" | "lang"

インデックスアクセス

インデックスアクセスはプロパティの型を返します。User["name"]はstringになります。

interface User {
  id: number;
  name: string;
  email?: string;
}

type NameType = User["name"]; // string

getPropertyヘルパー

keyofとK extends keyof Tを組み合わせると、キーを制限し、正確な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 v1 = getProperty(u, "name"); // string
const v2 = getProperty(u, "id");   // number
console.log(v1.toUpperCase(), v2.toFixed(0));

ヒント

ヒント：

  • オブジェクトからキーを取得する場合は、keyof typeofを優先してください。
  • モデルを重複して定義せず、プロパティの型を反映するためにT[K]を使ってください。
  • 文字列で指定するキーは避け、安全性のためにユニオンを活用してください。

インデックスアクセスの確認

クイックチェック：T[K]は何を表しますか？

まとめ

まとめ：keyofはキーのユニオンを生成し、keyof typeofは値からキーを導出し、T[K]はプロパティの型を読み取ります。安全なヘルパーに最適です。

よくある質問

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

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

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

keyofでプロパティ名のunionを作り、インデックスアクセス型（T[K] / T["prop"]）でプロパティの型を安全に取得します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

  1. ジェネリック関数と制約（extends、デフォルトパラメーター）
  2. Partial、Readonly、Record、Pick、Omit
  3. keyofとインデックスアクセス型（入門）
← TypeScript Academyに戻る