プログラミング入門 TypeScriptで関数の戻り値に型をつけてみよう

昨日に引き続きTypeScriptについてです。

今回は関数の戻り値に型をつけてみます。

以下のコードは伝票の金額から税額を算出する処理です。

const tax = (price) => {
	return price * 0.08
}

const price = (amount) => {
	return `${amount * 1.12}円`
}

const result = tax(price(200))
console.log(result) //NaN

しかし、resultはNaNになってしまっています。

price関数では「XX円」という文字列を返しているため、taxでは文字列に0.08を乗算してNaNになってしまっています。

priceはもともとはNumberを返す関数でしたが、誰かが「円」を付与して文字列を返すようにしてしまったようです。

結果として、これまで動いていたコードが動かなくなってしまいました。

priceは引数でNumberを受け取りNumberを返す関数ということを厳密に示せたら良いですね。

TypeScriptでは引数の型を指定するのと同様に、戻り値の型も指定可能です。

const tax = (price: number): number => {
	return price * 0.08
}

const price = (amount: number): number => {
	return amount * 1.12
}

const result = tax(price(200))
console.log(result)

price関数でいうと、(amount: number) の後に : number とありますが、これが戻り値の型です。

もし、price関数の戻り値をstringにしたい場合は以下のようになります。

const price = (amount: number): string => {
	return `${amount * 1.12}円`
}

もし、指定している戻り値の型と、実際のコードの戻り値の型が異なる場合はコンパイルエラーになります。

const price = (amount: number): number => {
	return `${amount * 1.12}円`
}
// これは戻り値の型が一致しないのでコンパイルエラーになる
// 戻り値の型はnumberを指定しているが、実際にreturnしているのはstringのため