🍣

TypeScriptで関数の返り値の型を取得する

2022/08/05に公開約1,300字
const hogeFunc = () => {
	return {
		hoge: { () => return 'hoge'; } // stringを返す関数
		fuga: { () => return 123; } // numberを返す関数
		piyo: { () => return isHoge ? 'hoge' | null; } // string | nullを返す関数
	}
}

このような関数があった場合、

type Hoge = {
	hoge: string;
	fuga: number;
	piyo: string | null;
}

このような型を生成したい🤤

解決策

type Hoge = {[key in keyof ReturnType<typeof hogeFunc>]: ReturnType<ReturnType<typeof hogeFunc>[key]>}

ReturnType →関数型の返り値の型を取得する

ReturnTypeはUtility Type(TypeScriptが用意している便利なやつ)のひとつで、関数型を投げるとその関数型の返り値の型を取得することができます。

type T0 = ReturnType<() => string>
// type T0 = string

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

ReturnTypeに冒頭のhogeFuncの型を渡すことにより、返り値の型(関数型をvalueに持つオブジェクト型)を取得することができ、
さらにその型をオブジェクトのキーごとにReturnTypeに渡すことによって欲しかった型を取得することができます。

type T1 = ReturnType<typeof hogeFunc>
↓
// 下記の型になる
type T1 = {
	hoge: () => return 'hoge';
	fuga: () => return 123;
	piyo: () => return isHoge ? 'hoge' | null;
}

// キーごとにReturnTypeにわたし、返り値の型を取得する
type T2 = {
	hoge: ReturnType<T1['hoge']>; // string
	fuga: ReturnType<T1['fuga']>; // number
	piyo: ReturnType<T1['piyo']>; // string | null
}
↓
// キーごとに取得すればOKなので下記のように書ける&可変キーにも対応
type T2 = {
	[key in keyof T1]: ReturnType<T1[key]>
}

Discussion

ログインするとコメントできます