uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.8.27【TypeScript】型定義で関数の戻り値を直接使えるReturnType

【TypeScript】型定義で関数の戻り値を直接使えるReturnType

TypeScriptを使っていて型定義とメソッドの戻り値を合わせるのが結構大変なことありますよね。

私もよく関数を作った時に力技で

function bindMember(){
  return {
    name :'hogehoge',
    age :  20
  }
}

という関数の戻り値で作ったオブジェクトの型を定義する時に毎回

export type MemberType = {
  name: string,
  age: number,
}

のようにして型定義していました。

ReturnType

しかしTypeScriptのドキュメントを読んでいるとReturnTypeという関数の戻り型を取得してくれる機能を発見しました。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#predefined-conditional-types

ReturnType — Obtain the return type of a function type.

type ReturnType<T extends (...args: any[]) => any>

使い方は簡単で、

export type MemberType = ReturnType<typeof bindMember>

と記述すればMemberTypeの戻り値の型を設定してくれます。

 {
  name: string,
  age: number,
}

と定義されるようになりました。

目次
PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)