型レベルの文字列分割
型システム内で文字列をタプルに分割します。
「型レベルの文字列分割」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
テンプレートリテラル型
型システムでは、テンプレートリテラル型とinferを組み合わせて、文字列リテラル型に対してパターンマッチングを行えます。これは型レベルの文字列解析における中核的なツールです。
表記: 実際の TypeScript では、テンプレートリテラル型を、ドル記号と波括弧の穴を含むバッククォートで囲まれた文字列として記述します。ここでのスニペットでは、そのパターンをTpl<...>として表し、各部分を順番に並べています。たとえば、リテラルのプレフィックスに続く Rest に一致するバッククォートテンプレートは、Tpl<'prefix', infer Rest>と表します。
type StartsWithA<S> = S extends Tpl<'a', string> ? true : false;
// Tpl<'a', string> is a backtick template literal type: 'a' then anything
type X = StartsWithA<'abc'>; // true
type Y = StartsWithA<'bcd'>; // falseサフィックスの推論
テンプレート内にinferを置くと、文字列の一部を取り出せます。ここでは、先頭の"a"より後にあるすべての部分を取り出します。
type AfterA<S> = S extends Tpl<'a', infer Rest> ? Rest : never;
// Tpl<'a', Rest> captures everything after a leading 'a'
type X = AfterA<'abc'>; // 'bc'区切り文字で分割する
区切り文字の最初の出現箇所で文字列を分割するには、「先頭部分、区切り文字、末尾部分」というパターンに一致させ、両側を推論します。先頭部分の推論は左側から貪欲に行われるため、最初に一致したものが採用されます。
type SplitOnce<S, Sep extends string> =
S extends Tpl<infer Head, Sep, infer Tail>
? [Head, Tail]
: [S];
// Tpl<Head, Sep, Tail> matches up to the first separator
type X = SplitOnce<'a-b-c', '-'>; // ['a', 'b-c']再帰的な分割
すべての部分に分割するには、末尾部分に対して再帰します。区切り文字がなくなるまで、各 Head をタプルに収集します。
type Split<S extends string, Sep extends string> =
S extends Tpl<infer Head, Sep, infer Tail>
? [Head, ...Split<Tail, Sep>]
: [S];
// recurse on Tail until no separator remains
type X = Split<'a.b.c', '.'>; // ['a', 'b', 'c']再帰をたどる
Split<"a.b.c", ".">の処理をたどってみましょう。
- Head は "a"、Tail は "b.c" -> ["a", ...Split<"b.c">]
- Head は "b"、Tail は "c" -> ["b", ...Split<"c">]
- "c" には "." がないため、基本ケース -> ["c"]
結果: ["a", "b", "c"] です。
type X = Split<"one,two", ",">; // ["one", "two"]
type Y = Split<"x/y/z", "/">; // ["x", "y", "z"]空のセグメントを扱う
区切り文字が隣接していたり、端にあったりすると、分割によって空の文字列が生成されることがあります。パターンはその場合も一致し、空のHeadまたはTailを推論します。
type X = Split<"a,,b", ",">; // ["a", "", "b"]
type Y = Split<",a", ",">; // ["", "a"]再結合する
分割の逆操作は結合です。テンプレートリテラルを使い、文字列のタプルをたどりながら区切り文字で連結します。これは分割と自然に組み合わせられます。
type Join<T extends string[], Sep extends string> =
T extends [infer H extends string, ...infer R extends string[]]
? R extends [] ? H : Tpl<H, Sep, Join<R, Sep>>
: '';
// Tpl<...> denotes a template literal type concatenation
type X = Join<['a', 'b', 'c'], '-'>; // 'a-b-c'空白のトリミング
文字列ユーティリティは組み合わせて使えます。Trim型は、テンプレート推論によって空白を繰り返し取り除き、先頭と末尾の空白を削除します。
type TrimLeft<S extends string> =
S extends Tpl<' ', infer R> ? TrimLeft<R> : S;
type TrimRight<S extends string> =
S extends Tpl<infer R, ' '> ? TrimRight<R> : S;
type Trim<S extends string> = TrimRight<TrimLeft<S>>;
// Tpl<' ', R> strips a leading space; Tpl<R, ' '> strips a trailing one
type X = Trim<' hi '>; // 'hi'部分文字列の置換
Replace は、対象の前後で分割し、置換後の文字列で再結合することで機能します。これらはすべて、テンプレート推論と再帰によって実現します。
type ReplaceAll<S extends string, From extends string, To extends string> =
S extends Tpl<infer A, From, infer B>
? Tpl<A, To, ReplaceAll<B, From, To>>
: S;
// split around From, then rejoin with To via template literal types
type X = ReplaceAll<'a-b-c', '-', '_'>; // 'a_b_c'分割が重要な理由
分割は構造化解析の基盤です。ルートは"/"で、クエリ文字列は"&"で、CSV の行は","で分割します。Splitを使うと、平坦な文字列型を、要素ごとに処理できるタプルへ変換できます。
type Segments = Split<"users/42/posts", "/">; // ["users", "42", "posts"]深さに関する注意
型レベルの文字列再帰には、コンパイラーの深さ制限があります。非常に長い文字列や区切り文字が多い文字列では、この制限を超える可能性があります。パスや小規模なフォーマットなど、一般的な入力であれば問題なく動作します。
type Ok = Split<"a/b/c/d/e", "/">; // fine for small strings理解度チェック
型レベルの文字列分割についての理解度を確認します。
まとめ
型だけを使って文字列を分割しました。
- テンプレートリテラル型と
inferによって、文字列の一部に一致させて取り出せます。 SplitOnceは最初の区切り文字で分割し、再帰によって完全なSplitになります。- Join、Trim、ReplaceAll は同じツールから組み立てられます。
次は、文字列型から構造化データを取り出します。
よくある質問
「型レベルの文字列分割」レッスンは無料ですか？
はい。「型レベルの文字列分割」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型レベルの文字列分割」で何を学びますか？
型システム内で文字列をタプルに分割します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「型レベルの文字列分割」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。