0Pricing
TypeScript Academy · レッスン

テンプレートリテラルによる解析

inferを使って文字列から構造化データを抽出します。

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

分割から構造化へ

分割すると、部分のタプルが得られます。解析はさらに進んだ処理で、文字列型から名前付きの構造化データを取り出します。複数のinfer変数を含むテンプレートリテラルパターンを使い、必要な部分を取り出します。

表記: 実際の TypeScript では、テンプレートリテラル型を、ドル記号と波括弧の穴を含むバッククォートで囲まれた文字列として記述します。ここでのスニペットでは、そのパターンをTpl<...>として表し、各部分を順番に並べています。たとえば、リテラルのプレフィックスに続く Rest に一致するバッククォートテンプレートは、Tpl<'prefix', infer Rest>と表します。

type KeyValue<S> =
  S extends Tpl<infer K, '=', infer V> ? { key: K; value: V } : never;
// Tpl<K, '=', V> matches K, an equals sign, then V

type X = KeyValue<'name=alice'>; // { key: 'name'; value: 'alice' }

複数の推論箇所

1つのパターンで、複数のフィールドを同時に取り出せます。"GET /users"を解析するには、1つの条件型でメソッドとパスを推論します。

type Request<S> =
  S extends Tpl<infer Method, ' ', infer Path>
    ? { method: Method; path: Path }
    : never;
// Tpl<Method, ' ', Path> matches the method, a space, then the path

type X = Request<'GET /users'>; // { method: 'GET'; path: '/users' }

推論した部分を絞り込む

extendsをインラインで使うと、推論する変数に制約を付け、特定の形にだけ一致させることができます。ここでは、メソッドが既知の動詞でなければなりません。

type Method = 'GET' | 'POST';
type Parse<S> =
  S extends Tpl<(infer M extends Method), ' ', infer P>
    ? { method: M; path: P }
    : never;
// the inferred M is constrained to Method inside the template pattern

type X = Parse<'POST /x'>; // { method: 'POST'; path: '/x' }

キーと値のペアを解析する

分割と解析を組み合わせます。クエリ文字列をペアに分割し、各ペアをキーと値に解析します。結果は、構造化されたエントリのタプルになります。

type Pair<S> =
  S extends Tpl<infer K, '=', infer V> ? [K, V] : [S, ''];
// Tpl<K, '=', V> splits a 'key=value' string literal type

type X = Pair<'page=2'>; // ['page', '2']

ペアからオブジェクトを構築する

mapped/intersection アキュムレーターを使い、キーと値のペアのタプルをオブジェクト型に畳み込みます。各ペアによって1つのプロパティが追加されます。

type FromPairs<T extends [string, string][]> =
  T extends [[infer K extends string, infer V], ...infer R extends [string, string][]]
    ? { [P in K]: V } & FromPairs<R>
    : {};

type X = FromPairs<[["a", "1"], ["b", "2"]]>; // { a: "1" } & { b: "2" }

クエリ文字列を解析する

すべてを組み合わせます。"&"で分割し、各部分を"="で解析してから、オブジェクトを構築します。これでコンパイラーは、クエリ文字列リテラルの正確なキーを認識できます。

type ParseQuery<S extends string> =
  FromPairs<{ [I in keyof SplitAmp<S>]: Pair<SplitAmp<S>[I] & string> }>;
// where SplitAmp splits on "&" (from previous lesson)

数値を取り出す

推論された部分は、常に文字列リテラル型です。ある部分を数値として扱うには、数値パターンに一致するかを確認するか、数字だけを許可する制約を通して変換します。値はリテラル型のままです。

type IsNumeric<S extends string> =
  S extends Tpl<number> ? true : false;
// Tpl<number> is a template literal type that matches any numeric string

type X = IsNumeric<'42'>; // true
type Y = IsNumeric<'4a'>; // false

省略可能なセグメント

省略可能な部分を扱うには、パターンのユニオンを使います。まず情報量の多いパターンを試し、一致しなければ単純なパターンにフォールバックします。

type ParsePath<S> =
  S extends Tpl<infer Base, '?', infer Query>
    ? { base: Base; query: Query }
    : { base: S; query: '' };
// Tpl<Base, '?', Query> matches an optional query after a question mark

type X = ParsePath<'/x?a=1'>; // { base: '/x'; query: 'a=1' }

空白とエッジケース

実際の文字列には、余分な空白が含まれることがあります。前のレッスンのTrimをパーサーと組み合わせ、先頭と末尾の空白によって取り出したフィールドが壊れないようにします。

type CleanKey<S extends string> = Trim<S>;
// Apply Trim to each inferred segment before using it

これが強力な理由

テンプレートリテラル解析を使うと、コンパイラーは日付、ルート、環境変数キー、SQL 断片などのフォーマットを理解できます。誤った文字列はコンパイルエラーになり、後続の型は解析された構造に応じて変化させられます。文字列リテラルが型付きの値になります。

type Event<S> =
  S extends Tpl<infer Domain, ':', infer Action>
    ? { domain: Domain; action: Action }
    : never;
// Tpl<Domain, ':', Action> matches 'domain:action'
type X = Event<'user:created'>; // { domain: 'user'; action: 'created' }

パーサーを組み合わせる

値レベルのコンビネータと同じように、型レベルのパーサーも組み合わせられます。分割し、各部分を解析してから、オブジェクトを組み立てます。各ステップは小さな条件型であり、それらを組み合わせることで、完全に型付けされたパーサーになります。

// Split -> Pair -> FromPairs is a parser pipeline at the type level

理解度チェック

テンプレートリテラル解析についての理解度を確認します。

まとめ

文字列型から構造化データを取り出しました。

  • 複数のinfer箇所によって、1つのパターンから名前付きフィールドを取り出せます。
  • 推論された部分は、インラインのextendsで絞り込めます。
  • Split、Pair、FromPairs を組み合わせて、クエリパーサーを構築できます。
  • Trim と数値チェックによって、エッジケースにも対応できます。

次は、完全なミニルートパーサーを作成します。

よくある質問

「テンプレートリテラルによる解析」レッスンは無料ですか?

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

「テンプレートリテラルによる解析」で何を学びますか?

inferを使って文字列から構造化データを抽出します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「テンプレートリテラルによる解析」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. パーサーコンビネーターの概念
  2. 型レベルの文字列分割
  3. テンプレートリテラルによる解析
  4. 型レベルのミニルートパーサー
← TypeScript Academyに戻る