TypeScriptのAwaited型で非同期処理を正確に型定義する
- 作成日 2025.01.23
- TypeScript
- TypeScript

TypeScriptの`Awaited`型は、非同期処理を行う際に返される値の型を正確に推論するための非常に強力なツールです。非同期関数の結果に対して正確な型を適用することで、コードの可読性と保守性が向上します。本記事では、`Awaited`型を活用して非同期処理をより安全に扱う方法を解説します。
非同期処理と型の問題
非同期処理を行う際、TypeScriptでは戻り値の型を正しく推論することが難しい場合があります。特に、`Promise`を返す関数や非同期処理の結果に対して、期待される型が正確に型推論されるようにすることが重要です。
Awaited型とは?
`Awaited`型は、TypeScriptの組み込み型ユーティリティの一つで、`Promise`の戻り値の型を抽出するために使用されます。非同期関数の結果が`Promise`である場合、その`Promise`の解決後の値の型を簡単に取得できます。
type Result = Awaited<Promise<string>>; // Resultはstring型になります
Awaited型の基本的な使い方
`Awaited`型を使用することで、非同期関数の戻り値から直接`Promise`の解決値を取り出すことができます。以下は、`Awaited`型を使った基本的な例です。
async function fetchData(): Promise<number> {
return 42;
}
type DataType = Awaited<ReturnType<typeof fetchData>>; // DataTypeはnumber型になります
非同期関数の型推論の改善
`Awaited`型を使用することで、非同期関数の型推論が強化されます。非同期関数が返す`Promise`の解決値を直接取得するため、型の誤解を防ぎ、より直感的にコードを書くことができます。
async function fetchUser(): Promise<{ name: string; age: number }> {
return { name: "Alice", age: 30 };
}
type UserType = Awaited<ReturnType<typeof fetchUser>>; // UserTypeは{ name: string; age: number }型になります
非同期処理の結果に対する型安全性の確保
非同期処理が返す結果に対して正確な型を適用することで、ランタイムエラーを未然に防ぎ、コードの安全性が向上します。`Awaited`型を使うことで、`Promise`の結果の型を正確に定義できるため、非同期処理の型の安全性を確保できます。
async function fetchDataFromAPI(): Promise<{ status: string, data: any }> {
return { status: "success", data: { id: 1, value: "example" } };
}
type APIResponse = Awaited<ReturnType<typeof fetchDataFromAPI>>;
// APIResponseは{ status: string, data: any }型になります
複雑な型を非同期処理に適用する
非同期関数が複雑な型を返す場合でも、`Awaited`型を使うことでその型を簡単に推論できます。特に、入れ子になった`Promise`や複雑なオブジェクトを取り扱う際に有用です。
async function fetchNestedData(): Promise<Promise<{ user: { name: string; id: number } }>> {
return Promise.resolve({ user: { name: "Bob", id: 1 } });
}
type NestedDataType = Awaited<Awaited<ReturnType<typeof fetchNestedData>>>;
// NestedDataTypeは{ user: { name: string; id: number } }型になります
非同期関数の戻り値に対する型変換
`Awaited`型は、非同期関数が返す`Promise`の型を簡単に変換するのに役立ちます。`Promise`を解決した後の値の型に基づいて、さらに型操作を行うことができます。
type StringData = Awaited<Promise<string>>; // StringDataはstring型
type NumberData = Awaited<Promise<number>>; // NumberDataはnumber型
// Promise<string>型を受け取る関数
async function getStringData(): Promise<string> {
return "hello";
}
// getStringData関数の戻り値の型をAwaited型で変換
type ResultType = Awaited<ReturnType<typeof getStringData>>; // ResultTypeはstring型になります
Promiseの複数の解決値を扱う
複数の`Promise`が並行して実行される場合でも、`Awaited`型を使うことで、結果の型を正確に定義できます。`Promise.all`などを使って複数の非同期操作を並列に実行する際に便利です。
async function fetchMultipleData(): Promise<[string, number]> {
return ["hello", 42];
}
type MultipleDataType = Awaited<ReturnType<typeof fetchMultipleData>>;
// MultipleDataTypeは[string, number]型になります
非同期処理とエラーハンドリング
非同期処理におけるエラーハンドリングも重要です。`Awaited`型を活用することで、エラーパターンが予測可能になり、適切な型チェックを行うことができます。
async function fetchDataWithError(): Promise<string> {
throw new Error("An error occurred");
}
type ErrorHandlingType = Awaited<ReturnType<typeof fetchDataWithError>>;
// ErrorHandlingTypeはstring型になりますが、エラーハンドリングの方法が必要です
非同期操作の組み合わせと型安全性
複数の非同期操作を組み合わせる際に、`Awaited`型を使用することでそれぞれの結果の型を確実に処理できます。これにより、非同期関数の組み合わせ時にも型安全を保つことができます。
async function fetchFirstData(): Promise<string> {
return "first data";
}
async function fetchSecondData(): Promise<number> {
return 100;
}
type CombinedData = [Awaited<ReturnType<typeof fetchFirstData>>, Awaited<ReturnType<typeof fetchSecondData>>];
// CombinedDataは[string, number]型になります
型の再利用と拡張性の確保
`Awaited`型を活用することで、非同期処理の型を簡単に再利用でき、拡張性が高まります。型の再利用性を高めるために、非同期操作における型の抽象化を行うことが可能です。
type UserData = Awaited<ReturnType<typeof fetchUser>>;
type ProductData = Awaited<ReturnType<typeof fetchProduct>>;
type AllData = UserData | ProductData; // UserData型とProductData型を合成することができます
まとめ
`Awaited`型は、非同期処理における型定義をより正確に行うための強力なツールです。非同期関数が返す`Promise`の解決後の値の型を簡単に推論し、型安全を保つことができます。これにより、TypeScriptで非同期処理を扱う際のコードの可読性、保守性、エラーの早期検出が向上します。
-
前の記事
Finder ユーティリティを開くショートカットキー 2025.01.23
-
次の記事
Vue.jsでマイクロフロントエンドを構築するためのアプローチ 2025.01.23
コメントを書く