2021年5月16日日曜日

TypeScriptで関数の戻り値を型として利用したい場合はReturnTypeとtypeofを組み合わせると良い


TypeScriptとはJavaScriptに型が付いた言語です。
ReturnTypeとtypeofの組み合わせで関数の戻り値を型として扱う書き方が便利だったので、備忘録を兼ねて記事を残します。

下記のコードように関数の戻り値の型が欲しいことがあります。
const dataBuilder = () => {
return {
a: 'test A',
b: 'test B',
}
}

const data = dataBuilder()

const dataHandler = (data: any) => { // ここのanyを取りたい
// 何かする
}

dataHandler(data)

上記の例でdataBuilderの戻り値がそれほど多くないならそれ用のinterfaceやtypeの定義でも済みますが、dataBuilderの型が複雑になったり、定義する型がdataBuilder専用になる場合は、戻り値から型を作りたくなります。

調べてみた所、下記のようにReturnTypetypeofを組み合わせることで戻り値を型として定義できると分かりました。
下記の例ではIDataという名前で型を定義しています。
type IData = ReturnType<typeof dataBuilder>

これの利用により、dataHandlerの引数をanyではなくふさわしい型で扱えます。
const dataHandler = (data: IData) => { // anyが取れた
// 何かする
}

ReturnTypeとtypeofを使うことで、関数の中身とほぼ同じ型を定義すること無く、anyの無い型制約の面では安心できるコードが書けました。

参考
この書き方を知ったstack overflowのページです。
TypeScript typeof Function return value

RetrnTypeは2018年2月のPRで取り込まれたようです。
Type inference in conditional types #21496

TypescriptのReturnTypeの説明です。
ReturnType<Type>

0 件のコメント :