【TypeScript】Utility TypesのReturnTypeを深く理解する

この記事は何？

この記事は、Utility Typesの一つであるReturnTypeについて深く理解する記事です。
Utility Typesってそもそも何？という型（方）は以下の記事を御覧ください🙇🏻
👉 TypeScriptのUtility Typesを理解して活用する

そもそも、TypeScriptって何？って型は以下を御覧ください
👉 JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~

ReturnType＜Type＞とは

TypeScript公式には以下のように書かれています。

Constructs a type consisting of the return type of function Type.
関数型の戻り値の型で構成される型を構築します。
https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

つまり、ReturnTypeは、関数の戻り値の型から新たな型を生成します。

実際にコードの場合、以下のように表すことが出来ます。

type hogehoge = ReturnType<関数型>

// type MojiType = string
type MojiType = ReturnType<() => string>; // 返り値がstringの関数

// type ObjectType = { name: string; old: number; }
type ObjectType = ReturnType<(value: string) => { name: string; old: number }>; // 返り値がオブジェクトの関数

const callAnimal = (animalName: string, owner: string): void => {
  console.log(`${animalName}！${owner}の近くにおいで！`);
};

// type AnimalType = void
type AnimalType = ReturnType<typeof callAnimal>; // 返り値がvoidの関数

このReturnType<>はどのようなシーンで利用するのでしょうか？

これは個人的に考えた用途なのですが、サードパーティーの関数を利用する時に使えるのではないかと考えています。

例えば、以下のような関数を含むパッケージをインストールするとします。

calculateByAllOperator.ts

interface Calculate {
  addition: number;
  subtraction: number;
  multiplication: number;
  division: number;
}

export const calculateByAllOperator = (
  num1: number,
  num2: number
): Calculate => {
  return {
    addition: num1 + num2,
    subtraction: num1 - num2,
    multiplication: num1 * num2,
    division: num1 / num2,
  };
};

そして、この関数を利用してみます。

// calculateByAllOperator関数をimport
import { calculateByAllOperator } from "./calculateByAllOperator";

// 予めcalculateByAllOperator関数の返り値の型を`ReturnType`で作る
type FunctionReturnType = ReturnType<typeof calculateByAllOperator>;

// 返り値の型でオブジェクトを定義
const result: FunctionReturnType = calculateByAllOperator(5, 2);

// calculateByAllOperatorの結果を使う
console.log(
  `+: ${result.addition}, -: ${result.division}, *: ${result.multiplication}, /: ${result.subtraction}`
); // +: 7, -: 2.5, *: 10, /: 3

このように、ReturnTypeでオブジェクトの型を作っておきます。
この関数の返り値から作った型を使えば、誤った型を持つオブジェクトを出力することが防げます。
また、わざわざplusOnecalculateByAllOperator関数の返り値の型をinterfeceで作る必要もありません。

また、React&TypeScriptであれば、以下のように使っても良いかもしれません。

import { calculateByAllOperator } from "./calculateByAllOperator";

type Props = ReturnType<typeof calculateByAllOperator>;

const hogehogeComponent: React.FC<Props> = (props) => {
 ...
}

以上のように、利用できるかと思います。
他にも、良い利用方法があれば是非コメント欄で教えて下さい！

おわりに

今回は、Utility TypesのReturnTypeについて紹介しました。
是非、ご活用ください！

参考

• https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype