FlattenとUnwrapPromiseユーティリティ
ネストしたジェネリック構造をアンラップする型を記述します。
「FlattenとUnwrapPromiseユーティリティ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
Flatten の課題
JavaScript の配列はネストできます。Flattenユーティリティ型は、型から配列のラッパーを再帰的に取り除き、最も内側の要素型を返します。
type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type A = Flatten<number[][][]>; // number
type B = Flatten<string[]>; // string再帰なしの Flatten（1 階層）
1 階層のフラット化はArray.prototype.flat(1)に対応し、ネストを正確に 1 階層分だけ展開します。
type FlatOnce<T> = T extends (infer U)[] ? U : T;
type A = FlatOnce<number[][]>; // number[]
type B = FlatOnce<string[]>; // string再帰的な Flatten
再帰版は、配列のラッパーがなくなるまで再帰することで、Array.prototype.flat(Infinity)と同じように動作します。
type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type C = Flatten<boolean[][][]>; // booleanUnwrapPromise: 1 階層
infer を使って、Promiseの 1 階層を展開します。
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type D = UnwrapPromise<Promise<string>>; // string
type E = UnwrapPromise<number>; // numberディープ UnwrapPromise
ネストした Promise を再帰的に展開します。組み込みのAwaitedと同等の処理です。
type DeepUnwrap<T> = T extends Promise<infer U> ? DeepUnwrap<U> : T;
type F = DeepUnwrap<Promise<Promise<number>>>; // numberFlatten と UnwrapPromise の組み合わせ
組み合わせた型は Promise と配列の両方を処理でき、配列を返す非同期関数に役立ちます。
type Simplify<T> =
T extends Promise<infer U> ? Simplify<U>
: T extends (infer V)[] ? Simplify<V>
: T;
type G = Simplify<Promise<string[][]>>; // string組み込みの Awaited<T>
TypeScript 4.5 以降にはAwaitedが組み込まれており、Promise 以外の thenable を含む thenable 型を再帰的に展開します。
type H = Awaited<Promise<Promise<string>>>; // string
// Also handles custom thenables with .then()Map の値の展開
同じ infer パターンを使って、Mapから値の型を抽出できます。
type MapValue<T> = T extends Map<any, infer V> ? V : never;
type I = MapValue<Map<string, number[]>>; // number[]FlattenObject: ネストしたインターフェースの統合
型レベルのオブジェクトフラット化は、ネストしたオブジェクト型を統合します。より複雑ですが、深くネストした設定の統合に役立ちます。
// This requires recursive mapped types + intersection spreading
// See the DeepPartial lesson for the base pattern実用例: API レスポンスの展開
ネストした API レスポンスのラッパーを展開し、手動で型アサーションを記述せずにデータ型を取得します。
type ApiData<T> = { data: T; status: number };
type ExtractData<T> = T extends ApiData<infer D> ? D : T;
type J = ExtractData<ApiData<User[]>>; // User[]まとめ: Flatten と Unwrap
FlattenとUnwrapPromiseは、inferを使った再帰的な条件型で型のラッパーを取り除きます。Promise の展開にはAwaitedを使用し、それ以外の構造にはカスタムの再帰処理を記述します。
理解度チェック
Flattenは何を返しますか？
学習内容
FlattenとUnwrapPromiseは、ジェネリックのラッパーを取り除く再帰的な条件型です。これらを組み合わせて複雑なネスト型を簡潔にし、Promise のチェーンには組み込みのAwaitedを使用します。
よくある質問
「FlattenとUnwrapPromiseユーティリティ」レッスンは無料ですか？
はい。「FlattenとUnwrapPromiseユーティリティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「FlattenとUnwrapPromiseユーティリティ」で何を学びますか？
ネストしたジェネリック構造をアンラップする型を記述します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「FlattenとUnwrapPromiseユーティリティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- DeepPartialとDeepReadonly
- FlattenとUnwrapPromiseユーティリティ
- TupleToUnionとUnionToIntersection
- 型ユーティリティライブラリの公開