このanyを撲滅せよ

初段 / 目安 15分

三日目、凛さんの声がいつもより低くなっていました。

「any、3箇所見つけました。全部消してください。……推論に任せられる箇所は、書かなくて結構です」

any は「何でもあり」を意味する型です。any と書かれた値には、TypeScript は一切口を出しません。数値に対して .toUpperCase() を呼んでも、存在しないプロパティを触っても、素通りします。any を1つ置くたびに、その周辺だけ JavaScript に戻ります。

では any をどうやって消すのでしょうか。方法は2つあります。

1つめは、正しい型に置き換えることです。引数のように、外から何が来るか TypeScript には分からない場所では、こちらを使います。

2つめは、注釈そのものを消すことです。const total: any = 0 のように初期値がある変数なら、注釈を消すだけで TypeScript が number だと推論してくれます。凛さんが「書かなくて結構です」と言ったのはこの話です。注釈は多ければ良いものではありません。引数と戻り値のように、推論が届かない境界にだけ書くのが、読みやすい TypeScript です。

今回の題材は、fleama の出品リストから売上合計を求める処理です。

完成条件

価格の配列と、送料込みかどうかのフラグを受け取り、合計金額を返す関数 totalPrice を作ってください。

• 価格の配列の合計を求めること
• 送料込みフラグが true のときは、合計に一律250を足すこと
• 配列が空のときは、送料込みでも0を返すこと
• any を1つも書かないこと。初期値から型が分かる変数には、そもそも注釈を書かないこと

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

any を使っていないことは、実行では測れません。テストは合計金額だけを見ます。それでも any を書かないでください。ここで手を抜いても誰も気づきませんが、気づかれない場所で手を抜かない練習が、この一問の本体です。

1. 関数名は totalPrice、引数は価格の配列と送料込みフラグの2つ
2. any を1つも書かないこと
3. 初期値から型が分かる変数には注釈を書かず、推論に任せること
4. 送料込みフラグが true のときは合計に250を足すこと
5. 価格の配列が空のときは、送料込みでも0を返すこと