0Pricing
TypeScript Academy · レッスン

Mapped Types

Mapped Typesを使って既存の型を新しい型に変換し、動的なデータ構造を柔軟に扱う方法を学びます。

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

マップ型入門

マップ型入門

マップ型を使うと、型の各プロパティに操作を適用して、既存の型を新しい型に変換できます。

TypeScriptで柔軟かつ再利用可能な型構造を作成するための強力な機能です。

Mapped Types — イラスト1

マップ型とは何ですか

マップ型とは何ですか

マップ型では、{ [P in keyof T]: T[P] }のような構文を使って、型Tのプロパティを反復処理します。

マップ型の基本例

マップ型の基本例

マップ型を使って、ある型の読み取り専用バージョンを作成する簡単な例を見てみましょう:

type User = {
  name: string;
  age: number;
};

type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

組み込みマップ型の使用

組み込みマップ型の使用

TypeScriptには、次のような組み込みマップ型が用意されています:

  • Readonly<T>: Tのすべてのプロパティを読み取り専用にします。
  • Partial<T>: Tのすべてのプロパティを省略可能にします。
  • Required<T>: Tのすべてのプロパティを必須にします。
type User = {
  name: string;
  age: number;
};

// Example of Partial
const user: Partial<User> = {
  name: 'John',
};

ユニオン型へのマッピング

ユニオン型へのマッピング

マップ型はユニオン型と組み合わせて、新しい結合型を作成することもできます:

type Status = 'active' | 'inactive';

type StatusFlags = {
  [K in Status]: boolean;
};

const flags: StatusFlags = {
  active: true,
  inactive: false,
};

条件付きマップ型

条件付きマップ型

条件付き型をマップ型と組み合わせて、より複雑な型変換を作成できます。

type User = {
  name: string;
  age?: number;
};

type NonOptional<T> = {
  [K in keyof T]-?: T[K];
};

type RequiredUser = NonOptional<User>;

高度な例: プロパティの除外

高度な例: プロパティの除外

マップ型を使って特定のプロパティを除外する方法を見てみましょう:

type User = {
  id: number;
  name: string;
  password: string;
};

type PublicUser = {
  [K in keyof User as Exclude<K, 'password'>]: User[K];
};

練習課題

練習課題

Product型のすべてのプロパティにreadonly修飾子を追加するマップ型を作成してください。新しい型の変数を宣言して動作を確認しましょう。

マップ型の復習

おめでとうございます！

既存の型を動的に変換して新しい型を作成するための、マップ型の使い方を学びました。これらのテクニックを練習して、TypeScriptコードをさらに強力にしましょう。

Mapped Types — イラスト10

よくある質問

「Mapped Types」レッスンは無料ですか？

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

「Mapped Types」で何を学びますか？

Mapped Typesを使って既存の型を新しい型に変換し、動的なデータ構造を柔軟に扱う方法を学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Mapped Types」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. KeyofとLookup Types
  2. Mapped Types
  3. Intersection TypesとUnion Types
← TypeScript Academyに戻る