0Pricing
TypeScript Academy · レッスン

キーの再マッピングとテンプレートリテラル型

「as」でキーを再マッピングし、テンプレートリテラル（Capitalize/Uncapitalize）でキーを作り、名前のパターンでプロパティを絞り込みます

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

概要

目標: テンプレートリテラル型とともにキーの再マッピング（as 句）を使い、名前のパターンに基づいてプロパティの名前変更、生成、削除を行います。

  • キーの名前を変更する: K as NewK
  • never でキーをフィルタリングする
  • 名前を組み立てる: `get${Capitalize<K>}`

キーの名前を変更

as を使ってキーの名前を変更します。例: snake_case の名前を camelCasee に変換します。

type Original = { first_name: string; last_name: string }

type Camelize<T> = {
  [K in keyof T as K extends `${infer A}_${infer B}`
    ? `${A}${Capitalize<B>}`
    : K]: T[K]
}

type UserCamel = Camelize<Original>  // { firstName: string; lastName: string }

プレフィックスでフィルタリング

never キーを削除します。テンプレート: `on${string}` を使ってイベントハンドラーをフィルタリングします。

type Props = { onClick: () => void; onSubmit: () => void; title: string }

type WithoutHandlers<T> = {
  [K in keyof T as K extends `on${string}` ? never : K]: T[K]
}

type Clean = WithoutHandlers<Props>  // { title: string }

メソッドを生成

テンプレート名で API の公開部分を生成します。get${Capitalize<K>} パターンを使うと、フィールドからゲッターを作成できます。

type Fields = "name" | "email"

type Getters<T extends string> = {
  [K in T as `get${Capitalize<K>}`]: () => string
}

type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }

パターンを組み合わせる

複数のテンプレートを組み合わせて明確な名前を生成し、大規模なプロジェクト全体で一貫した命名を実現します。

type Route = `/${"" | `${string}`}`

type HttpMethod = "get" | "post"

type Endpoints<T extends string, M extends string> = {
  [K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}

type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }

ヒントと注意点

ヒント:

再マッピングはコストがかかるため、複雑な型はエイリアスに分割してください。

フィルターには単純なテンプレートを使用します: `on${string}`、`data-${string}`。

Capitalize/Uncapitalize/Uppercase/Lowercase ヘルパーを使用してください。

名前の生成が過剰になった場合は、API を簡素化してください。

プレフィックスのフィルタリングを確認

簡単な確認: on で始まるプロパティを削除するマップ型のパターンはどれですか。

振り返り

振り返り: キーの再マッピングで名前の変更とフィルタリングを行い、テンプレートリテラル型でキーを生成し、不要なキーを never で削除します。

よくある質問

「キーの再マッピングとテンプレートリテラル型」レッスンは無料ですか？

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

「キーの再マッピングとテンプレートリテラル型」で何を学びますか？

「as」でキーを再マッピングし、テンプレートリテラル（Capitalize/Uncapitalize）でキーを作り、名前のパターンでプロパティを絞り込みます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「キーの再マッピングとテンプレートリテラル型」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. +/-readonlyと+/-?を使ったMapped Types
  2. キーの再マッピングとテンプレートリテラル型
  3. 文字列パターンの型付け（ルートパラメーター、イベント名）
← TypeScript Academyに戻る