0Pricing
TypeScript Academy · レッスン

Record:キーと値の型の対応付け

Record で辞書のような型を構築します。

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

概要

Record は、特定のキー K と一律の値の型 V を持つオブジェクト型を作成します。辞書のような構造で、すべてのキーを手作業で型付けする必要がなくなります。

Record の基本構文

Record にキーの型と値の型を渡します。
type Roles = Record<'admin' | 'user' | 'guest', boolean>;
const access: Roles = { admin: true, user: true, guest: false };

string キーでの Record

一般的な辞書には、キーの型として `string` を使用します。
const headers: Record<string, string> = {
  'content-type': 'application/json',
  'authorization': 'Bearer token'
};

ルックアップテーブルに使う Record

Record は、ID やコードを値に対応付けるルックアップテーブルに最適です。
const statusLabels: Record<number, string> = {
  200: 'OK',
  404: 'Not Found',
  500: 'Server Error'
};

Record の実装方法

Record はキーのユニオンに対するマップ型です。
type Record<K extends string | number | symbol, V> = { [P in K]: V };

Record とインデックスシグネチャの比較

Record は `{ [key: string]: V }` と同等ですが、より読みやすく、他の型と組み合わせやすくなっています。
// Equivalent:
type A = Record<string, number>;
type B = { [key: string]: number };

ユニオン値での Record

値の型には、ユニオン型や複雑な型を指定できます。
type Config = Record<'development' | 'staging' | 'production', { url: string; debug: boolean }>;

Partial Record

Partial と組み合わせると、すべてのキーが存在しなくてもよい型にできます。
type OptionalConfig = Partial<Record<'debug' | 'verbose' | 'trace', boolean>>;

Readonly Record

Readonly と組み合わせると、変更を防止できます。
const CODES: Readonly<Record<string, number>> = { A: 1, B: 2 };

グループ化に使う Record

カテゴリキーで項目をグループ化するときは、Record を使用します。
function groupBy<T>(items: T[], key: keyof T): Record<string, T[]> {
  return items.reduce((acc, item) => {
    const k = String(item[key]);
    (acc[k] ??= []).push(item);
    return acc;
  }, {} as Record<string, T[]>);
}

Enum キーでの Record

Enum の値は Record のキーとして使用できます。
enum Color { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' }
const hexCodes: Record<Color, string> = {
  [Color.Red]: '#FF0000',
  [Color.Green]: '#00FF00',
  [Color.Blue]: '#0000FF',
};

確認問題

`Record<'a' | 'b', number>` は何を生成しますか?

まとめ

Record は、特定のキーと一律の値の型を持つ、型付けされた辞書を作成します。ルックアップテーブル、設定マップ、groupBy の結果に使用します。Partial や Readonly と組み合わせると、さらに細かく制御できます。

よくある質問

「Record:キーと値の型の対応付け」レッスンは無料ですか?

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

「Record:キーと値の型の対応付け」で何を学びますか?

Record で辞書のような型を構築します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Record:キーと値の型の対応付け」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. PartialとRequired:オプション性の切り替え
  2. PickとOmit:プロパティの選択
  3. Record:キーと値の型の対応付け
  4. Readonly、Exclude、Extract、NonNullable
← TypeScript Academyに戻る