inferの実践的な用途：Promiseのアンラップ
Promise、Array、独自ラッパーの型をアンラップします。
「inferの実践的な用途：Promiseのアンラップ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
ラッパー解除の課題
非同期コードを扱うときは、Promiseを受け取り、その内部のTが必要になることがよくあります。inferキーワードを使うと、この取り出し処理を再利用できます。
type Awaited<T> = T extends Promise<infer U> ? U : T;
type A = Awaited<Promise<string>>; // string
type B = Awaited<number>; // number組み込みの Awaited ユーティリティ
TypeScript 4.5 では、ネストした promise を再帰的に処理する組み込みのAwaitedが導入されました。
type A = Awaited<Promise<Promise<string>>>; // string
// Handles arbitrary nesting automatically深さを指定したラッパー解除
Awaited が組み込まれる前は、開発者は infer を使った再帰型で promise のラッパーを解除していました。
type DeepAwaited<T> =
T extends Promise<infer U> ? DeepAwaited<U> : T;
type A = DeepAwaited<Promise<Promise<number>>>; // number配列要素のラッパー解除
同じ infer パターンで配列の要素型を取り出せます。これは組み込みのT[number]を使う方法と同等です。
type Element<T> = T extends (infer U)[] ? U : never;
type A = Element<string[]>; // string
type B = Element<number[]>; // numberObservable 型のラッパー解除
RxJS の Observable では、infer を使って発行される型を取り出せます。
type ObservableType<T> = T extends Observable<infer U> ? U : never;
type A = ObservableType<Observable<User>>; // User関数の戻り値のラッパー解除
ReturnTypeとAwaitedを組み合わせると、非同期関数の解決後の値の型を取得できます。
async function getUser(): Promise<User> { /* ... */ }
type UserResult = Awaited<ReturnType<typeof getUser>>; // Userネストしたラッパーの解除
infer を連鎖させると、Promiseのように複数の層でラップされた型を処理できます。
type UnwrapPromiseArray<T> =
T extends Promise<infer U>
? U extends (infer V)[]
? V
: U
: T;
type A = UnwrapPromiseArray<Promise<User[]>>; // User形状に基づく条件付きのラッパー解除
infer を使うと、特定の型だけを条件付きでラッパー解除し、それ以外の型は変更せずに残せます。
type MaybeUnwrap<T> =
T extends Promise<infer U> ? U : T extends (infer V)[] ? V : T;
type A = MaybeUnwrap<Promise<string>>; // string
type B = MaybeUnwrap<number[]>; // number
type C = MaybeUnwrap<boolean>; // boolean型付き API フェッチラッパー
解決後のデータ型を返すジェネリックなフェッチラッパーは、infer によるラッパー解除の典型的な応用例です。
async function fetchData<T>(url: string): Promise<T> {
const res = await fetch(url);
return res.json() as T;
}
type UserData = Awaited<ReturnType<typeof fetchData<User>>>; // Userエラーに安全なラッパー解除
Result パターンと infer を組み合わせると、判別共用体から成功時の型を取り出せます。
type Ok<T> = { ok: true; value: T };
type Err = { ok: false; error: string };
type ExtractOk<T> = T extends Ok<infer V> ? V : never;
type A = ExtractOk<Ok<number> | Err>; // number復習: infer によるラッパー解除
infer キーワードは、Promise、配列、Observable、Result 型などのラッパーから型を取り出すための万能ツールです。組み込みのAwaitedは非同期処理のラッパー解除に対応し、それ以外の構造にはカスタム型を使用します。
確認問題
非同期関数の解決後の値の型を取得する最適な方法は何ですか。
学んだこと
infer によるラッパー解除は、実践的な TypeScript の非同期コード向けのツールです。promise には組み込みのAwaitedを使用し、配列、Observable、Result パターンにはカスタムのラッパー解除型を作成してください。
よくある質問
「inferの実践的な用途：Promiseのアンラップ」レッスンは無料ですか？
はい。「inferの実践的な用途：Promiseのアンラップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「inferの実践的な用途：Promiseのアンラップ」で何を学びますか？
Promise、Array、独自ラッパーの型をアンラップします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「inferの実践的な用途：Promiseのアンラップ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 条件型のinferを理解する
- ReturnTypeとParametersをゼロから構築する
- 深くネストした推論パターン
- inferの実践的な用途：Promiseのアンラップ