0Pricing
TypeScript Academy · レッスン

文字列パターンの型付け（ルートパラメーター、イベント名）

テンプレートリテラル型で文字列を制約し、ルートパラメーターのパターン、イベント名の名前空間、安全なビルダーを扱います

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

概要

目標: 型で文字列の形式をモデル化します。テンプレートリテラル型を使うと、"/users/:id" や "user:created" のようなパターンを、優れた DX を保ちながら強制できます。

  • プレフィックスやサフィックスで制約する
  • infer で要素を取り出す
  • 安全なヘルパーを作る

ルートパラメーター

単純なルートテンプレートを定義し、infer でパラメーター名を取り出します。ルールに適合しない場合は never にします。

type Route = `/${string}`

type RouteWithParam = `/${string}/:${string}`

type ParamOf<R extends string> = R extends `${string}/:${infer P}` ? P : never

// examples
type A = ParamOf<"/users/:id">      // "id"
type B = ParamOf<"/posts/:slug">    // "slug"

安全なルートヘルパー

安全なビルダー: ヘルパー関数は "/" で始まるテンプレートだけを受け付け、それ以外はコンパイル時に拒否されます。

type Path<R extends string> = R extends `/${string}` ? R : never

function route<R extends Path<R>>(r: R) { return r }

const ok = route("/users/:id")    // ok
// const bad = route("users")      // error: must start with "/"

イベント名前空間

プレフィックス（例: user:、order:）を制限し、型によって不正なフィールド名を拒否します。

type EventName = `user:${string}` | `order:${string}`

function on<E extends EventName>(name: E, cb: (data: unknown) => void) {
  // ... register listener
}

on("user:created", d => {})     // ok
// on("payment:done", d => {})  // error: not an EventName

イベントを分割

infer で 2 つのセクションを取り出し、型付きフィールドに変換します。無効な形式は発生しません。

type SplitEvent<E extends string> = E extends `${infer Scope}:${infer Action}` ? { scope: Scope; action: Action } : never

type S = SplitEvent<"user:created">   // { scope: "user"; action: "created" }

type Bad = SplitEvent<"oops">          // never

ヒント

ヒント:

制約は最小限にしてください。厳しすぎるテンプレートはリファクタリングを強いることになります。

Builder 関数を使って、ルールを 1 か所にまとめてください。

元の文字列を unknown データに対応付け、実行時に検証することを忘れないでください。

名前空間の確認

簡単な確認: イベント名を 2 つの名前空間に制限するパターンはどれですか。

振り返り

振り返り: テンプレートリテラル型でテンプレート化された文字列を制限し、infer で要素を取り出し、安全なビルダー関数を作成します。

よくある質問

「文字列パターンの型付け（ルートパラメーター、イベント名）」レッスンは無料ですか？

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

「文字列パターンの型付け（ルートパラメーター、イベント名）」で何を学びますか？

テンプレートリテラル型で文字列を制約し、ルートパラメーターのパターン、イベント名の名前空間、安全なビルダーを扱います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「文字列パターンの型付け（ルートパラメーター、イベント名）」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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