プログラミング入門 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のため
ディスカッション
コメント一覧
まだ、コメントがありません