4️⃣

[TypeScript UtilityTypes] ReturnType

2024/01/14に公開

TypeScript入門メモ
[Utility Types] ReturnType について

ReturnType<Type>

公式ドキュメント
https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

関数型 Type の戻り値の型からなる型を構築します。オーバーロードされた関数の場合、これは最後のシグネチャの戻り値の型となります。
参考: Inferring Within Conditional Types.

declare function f1(): { a: number; b: string };
 
type T0 = ReturnType<() => string>;
//type T0 = string

type T1 = ReturnType<(s: string) => void>;
//type T1 = void

type T2 = ReturnType<<T>() => T>;
//type T2 = unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
//type T3 = number[]

type T4 = ReturnType<typeof f1>;
//type T4 = {
//     a: number;
//     b: string;
// }

type T5 = ReturnType<any>;
//type T5 = any

type T6 = ReturnType<never>;
//type T6 = never

type T7 = ReturnType<string>; // error
// Type 'string' does not satisfy the constraint '(...args: any) => any'.
//type T7 = any

type T8 = ReturnType<Function>; // error
// Type 'Function' does not satisfy the constraint '(...args: any) => any'.
// Type 'Function' provides no match for the signature '(...args: any): any'.
//type T8 = any

使い所

関数の戻り値を利用する型の作成:
ある関数の戻り値の型を基にして新しい型を定義する場合
例えば、何かのライブラリで関数の型だけが定義されていて、戻り値の型も定義が必要な時など。

function getUser() {
  return { name: "Alice", age: 30 };
}

type UserType = ReturnType<typeof getUser>;

まとめ

外部APIやライブラリの関数の戻り値の型を利用して、APIレスポンスの型を定義する場合に便利そう。
APIのレスポンス形式が変更された場合にも、型定義を容易に追従させることができる。

ReturnType<Type> は関数の戻り値の型に基づいた型の再利用や、型安全性の強化、そして動的な型推論において役立ちそう。
特に、関数の戻り値が複雑な場合や、外部ライブラリの関数の戻り値に依存する場合に、効果を発揮することになると思われる。

Discussion