テンプレートリテラルによる解析
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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- パーサーコンビネーターの概念
- 型レベルの文字列分割
- テンプレートリテラルによる解析
- 型レベルのミニルートパーサー