🐵

【TypeScript】ReturnType<typeof 関数名>とは？

に公開
JavaScript
TypeScript
tech

関数の型と関数の戻り値の型

type 型名 = ReturnType<typeof 関数名>;

上記のような構文があったとき、ReturnTypeとtypeof 関数名の違いについて調べたのでメモ（どちらも関数の型＝関数の戻り値の型？と思ったので）。

以下の文字列を受け取って文字列を返す関数greetについて考える。

function greet(name: string): string {
  return `Hello, ${name}`;
}

typeof 関数名

これは「関数自体の型」を表し、戻り値だけでなく、引数の型情報も含む。

上記のgreet関数の場合、string型の引数nameを受け取って、string型の値を返すので、

(name: string) => string

が「関数の型」となる。

つまり、

type GreetFunctionType = typeof greet;

は、

(name: string) => string

となる。

ReturnType

名前からわかるように、これは「関数の戻り値の型」を表す。
もう少し正確に言うと、先ほどの「関数の型」から「戻り値の型」を取り出すのがReturnType。
つまり、先ほどのgreet関数の場合、stringとなる。

type GreetReturnType = ReturnType<typeof greet>;
// GreetReturnType は string

ReturnType<T>のTは型である必要があるため、一度関数の型をtypeofで型にしてあげる必要があることに注意。

ちなみに引数の型を取得したい場合は？

Parameters<T>を使う。

type GreetParams = Parameters<typeof greet>;
// GreetParams は [name: string, age: number]

ある関数の引数を、別の関数で再利用したい場合は、以下のように引数の型に取得した型を指定すればよい。

type GreetArgs = Parameters<typeof greet>;

const callGreet = (...args: GreetArgs) => {
  return greet(...args); // 型安全に呼び出せる！
};

Discussion