型レベルの再帰
再帰的な条件型を使って型を反復処理します。
「型レベルの再帰」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
型における再帰
条件型は自分自身を参照できます。これにより、型言語にループが生まれます。型レベルの再帰の多くは、タプルを1要素ずつ処理し、先頭を取り除いて残りの部分に対して再帰します。
type Length<T extends unknown[]> =
T extends [unknown, ...infer Rest]
? Length<Rest>
: 0;
// (this counts down to a base case)ベースケース
すべての再帰には停止条件が必要です。タプルの場合、それは通常、空のタプルです。[head, ...rest] というパターンに一致しなくなったら末尾に到達したため、固定された結果を返します。
type IsEmpty<T extends unknown[]> =
T extends [] ? true : false;
type A = IsEmpty<[]>; // true
type B = IsEmpty<[1, 2]>; // false先頭と末尾
基本となる操作は、スプレッドパターンと infer を使って、タプルを最初の要素と残りのタプルに分割することです。
type Head<T extends unknown[]> = T extends [infer H, ...unknown[]] ? H : never;
type Tail<T extends unknown[]> = T extends [unknown, ...infer R] ? R : [];
type A = Head<[1, 2, 3]>; // 1
type B = Tail<[1, 2, 3]>; // [2, 3]要素ごとに処理する
先頭、残りの部分、再帰を組み合わせて、タプル全体を変換します。ToStrings はタプルを再構築し、各要素型を string に置き換えます。
type ToStrings<T extends unknown[]> =
T extends [infer H, ...infer R]
? [string, ...ToStrings<R>]
: [];
type A = ToStrings<[1, true, 3]>; // [string, string, string]アキュムレーターのパターン
多くの場合、アキュムレーターと呼ばれる追加のパラメーターに結果を蓄積します。最初は空で、各ステップで大きくなります。これにより構造を何度も走査せずに済み、型レベルのループで標準的に使われる手法です。
type Reverse<T extends unknown[], Acc extends unknown[] = []> =
T extends [infer H, ...infer R]
? Reverse<R, [H, ...Acc]>
: Acc;
type A = Reverse<[1, 2, 3]>; // [3, 2, 1]アキュムレーターを追跡する
Reverse<[1,2,3]> の処理を追ってみましょう。
- ステップ1：H=1、Acc は [1] になります
- ステップ2：H=2、Acc は [2,1] になります
- ステップ3：H=3、Acc は [3,2,1] になります
- タプルが空になったら、Acc = [3,2,1] を返します
アキュムレーターは、再帰呼び出しのたびに答えを次へ渡します。
type R = Reverse<["a", "b"]>; // ["b", "a"]ユニオンに対する再帰
再帰を使って、文字列のユニオンを結合することもできます。ここでは、区切り文字で分けながら、タプルの要素を1つの文字列リテラル型に連結しています。
表記: 実際の TypeScript では、テンプレートリテラル型を、ドル記号と中かっこの穴を含むバッククォートで区切られた文字列として記述します。これらのスニペットでは、そのパターンを Tpl<...> として示し、各部分を順番に並べています。たとえば、リテラルのプレフィックスに続いて Rest に一致するバッククォートテンプレートは、Tpl<'prefix', infer Rest> として表します。
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<H, Sep, ...> builds a template literal type joining the parts
type A = Join<['a', 'b', 'c']>; // 'a,b,c'再帰によるカウント
再帰とアキュムレーターを組み合わせると、数を数えられます。入力と同じ長さの unknown のタプルを構築し、後でその length を読み取ります。これは算術のコースで何度も使うことになります。
type Count<T extends unknown[], Acc extends unknown[] = []> =
T extends [unknown, ...infer R]
? Count<R, [unknown, ...Acc]>
: Acc["length"];
type A = Count<["x", "y", "z"]>; // 3再帰によるフィルタリング
タプルを走査し、条件に一致する要素だけを残して、ほかの要素を取り除きます。要素をアキュムレーターに追加しなければ、その要素をスキップできます。
type KeepStrings<T extends unknown[], Acc extends unknown[] = []> =
T extends [infer H, ...infer R]
? H extends string
? KeepStrings<R, [...Acc, H]>
: KeepStrings<R, Acc>
: Acc;
type A = KeepStrings<[1, "a", 2, "b"]>; // ["a", "b"]再帰の深さの上限
コンパイラーは再帰の深さに上限を設けています（歴史的には約50で、一部のパターンでは末尾再帰の最適化によりさらに深くできます）。非常に大きなタプルでは、Type instantiation is excessively deep に達することがあります。アキュムレーターを使う末尾再帰スタイルで、上限を引き上げられます。
type Repeat<T, N extends number, Acc extends T[] = []> =
Acc["length"] extends N ? Acc : Repeat<T, N, [...Acc, T]>;
type A = Repeat<0, 3>; // [0, 0, 0]すべてを組み合わせる
先頭と末尾への分割、ベースケース、アキュムレーターが、ほぼすべての型レベルのループを構成する3つの要素です。これらを使えば、型システムだけでタプルのマッピング、フィルタリング、反転、カウント、結合を行えます。
type MapToPairs<T extends unknown[], Acc extends unknown[] = []> =
T extends [infer H, ...infer R]
? MapToPairs<R, [...Acc, [H, H]]>
: Acc;
type A = MapToPairs<[1, 2]>; // [[1, 1], [2, 2]]理解度チェック
アキュムレーターのパターンについて、理解度を確認しましょう。
まとめ
これで、型レベルでループを記述できるようになりました。
- 自己参照する条件型によって、再帰を作れます。
- タプルを
[H, ...R]に分割し、末尾に対して再帰します。 - ベースケース（空のタプル）がループを停止させます。
- アキュムレーターが結果を構築し、深い再帰を可能にします。
次は、条件型がユニオンに対して特別な動作をする仕組みです。
よくある質問
「型レベルの再帰」レッスンは無料ですか？
はい。「型レベルの再帰」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型レベルの再帰」で何を学びますか？
再帰的な条件型を使って型を反復処理します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「型レベルの再帰」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。