0Pricing
TypeScript Academy · レッスン

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

型変換の過程でキー名を変更します。

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

ようこそ

TypeScript 4.1では、マップ型に`as`句が追加され、型変換の一部としてキーを再マッピング(名前変更)できるようになりました。

基本的なキーのリマッピング

キー変数の後に `as NewKeyType` を追加すると、新しいキー名にリマッピングできます。
type Prefixed<T> = {
  [K in keyof T as `prefix_${string & K}`]: T[K]
};
type P = Prefixed<{ name: string }>;
// { prefix_name: string }

never によるキーのフィルタリング

`as` 句から `never` を返すと、そのキーを結果の型から除外できます。
type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K]
};

ゲッター名の生成

テンプレートリテラル型で Capitalize を使用すると、ゲッターメソッド名を生成できます。
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

セッター名の生成

同様に、型のプロパティに対応するセッター名を生成できます。
type Setters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (val: T[K]) => void
};

Record 型の反転

キーのリマッピングを使用して、キーと値を入れ替えます。
type Invert<T extends Record<string, string>> = {
  [K in keyof T as T[K]]: K
};

条件付きキーのリマッピング

値の型に応じて異なるキー変換を適用します。
type MethodKeys<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K]
};

テンプレートリテラルとの組み合わせ

リマッピングでテンプレートリテラル型を使用すると、名前空間付きのキーを生成できます。
type Namespaced<T, NS extends string> = {
  [K in keyof T as `${NS}::${string & K}`]: T[K]
};

シンボルキーのマッピング

キーのリマッピングでは、シンボルキーも扱えます。

実践: FormData 型

型付きデータモデルから、文字列値を持つフォームオブジェクトを導出します。
type FormFields<T> = {
  [K in keyof T as K extends string ? K : never]: string
};

as と条件付き型の組み合わせ

キーのリマッピングと条件付き型を組み合わせると、非常に表現力の高い型変換を作成できます。

確認問題

マップ型の `as` 句から `never` を返すと、そのキーはどうなりますか?

まとめ

マップ型の `as` 句を使うと、キーの名前変更や、`never` によるフィルタリング、テンプレートリテラルや条件式によるキーの変換ができます。これにより、ゲッターやセッターの生成、値の型によるプロパティのフィルタリングといった強力なパターンを実現できます。

よくある質問

「Mapped Typeのasによるキーの再マッピング」レッスンは無料ですか?

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

「Mapped Typeのasによるキーの再マッピング」で何を学びますか?

型変換の過程でキー名を変更します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Mapped Typeのasによるキーの再マッピング」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. Mapped Type:オブジェクト型の変換
  2. Mapped Typeの修飾子:readonlyと?
  3. テンプレートリテラル型:文字列パターン
  4. Mapped Typeのasによるキーの再マッピング
← TypeScript Academyに戻る