メインコンテンツにスキップ
モジュール 6 · レッスン 2 / 2コース内の 12/14~15 min
モジュールのレッスン (2/2)

マップされた型

マップされた型を使用すると、既存の型のプロパティを 1 つずつ変換することで新しい型を作成できます。これらは、keyof 演算子を使用して、キーに対するループ構文の上に構築されます。

TS
type Mapped<T> = {
  [P in keyof T]: T[P];
};

この例は、元の型と同じマップされた型を示しています。keyof T の各キー P を反復処理し、同じ型 T[P] を割り当てます。


可変性とオプション性の修飾子

readonly や ? (オプション) などの修飾子を追加または削除するには、先頭に + (追加、デフォルト) または - (削除) を付けます。

たとえば、型のすべてのプロパティからオプション性を削除する (必須にする) には、次のようにします。

TS
type Concrete<T> = {
  [P in keyof T]-?: T[P];
};

-? 修飾子は、各プロパティからオプション フラグを削除します。


as によるキーの再マッピング

TypeScript 4.1 以降では、as 句とテンプレート リテラル型を使用して、マップされた型のキーを再マップできます。

TS
type WriteSetters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void;
};

ここでは、各プロパティの名前を K から set[CapitalizedKey] に変更し、その型をセッター関数に変更しています。


自分で試してみてください

演習 1: プロパティを Null 可能にする

運動#ts.m6.l2.e1
試行回数: 0読み込み中…

オブジェクト T を受け取り、値 null も受け入れることができるようにすべてのプロパティを変換するジェネリック マップ型 Nullable<T> を宣言します (例: T[K] | null)。

エディターを読み込み中…
ヒントを表示

[K in keyof T]: T[K] | という構文を使用します。 null;マップされた型オブジェクト内。

3 回の試行後に解決策が利用可能になります

演習 2: as を使用した動的ゲッターの生成

運動#ts.m6.l2.e2
試行回数: 0読み込み中…

GetterNames<T> という名前のマップされた型を作成します。この型は、オブジェクト T のキーに「get」を接頭辞として付け、元のキーを大文字にする (Capitalize を使用する) ことによって変換します。たとえば、キーが name の場合、getName になる必要があります。プロパティのタイプを () => T[K] に設定します。

エディターを読み込み中…
ヒントを表示

\`get\${Capitalize<string & K>}\` として使用してキーを再マップし、 () => T[K] をプロパティの戻り値の型として使用します。

3 回の試行後に解決策が利用可能になります