関数を型で守る

章1で関数に型をつけた。引数のうしろに : string、かっこのうしろに戻り値の型。あれで基本は足りている。この章では、JavaScript コースで学んだ関数のいろいろな書き方に、ひとつずつ型をつけていくよ。

まずはアロー関数。const f = (n: number): number => n * 2; のように書く。引数と戻り値の型を書く場所は function のときと同じで、矢印が挟まるだけだ。実際の現場では、こちらのほうがよく見かけるかもしれない。

次に省略できる引数。名前だけで呼びたいときと、敬称も渡したいときがある。引数名のうしろに ? を付けると省略できるようになるけれど、そのとき中身では「渡されなかったかもしれない」ことを考えないといけない。TypeScript はそれを忘れさせてくれないよ。もっと素直な方法として、デフォルト引数も型と相性がいい。省略されたら決まった値になる、と書いておけば、中では悩まずに済む。

そして、この章の山場が関数を値として渡すところだ。JavaScript コースでコールバックを学んだよね。関数の引数に関数を渡すあれだ。渡される側は、「どんな関数を受け取るのか」を型で書くことになる。書き方は (n: number) => string — かっこの中が引数、矢印の右が戻り値。関数の型は、関数の見た目とほとんど同じ形で書けるんだ。

ここが書けるようになると、map や filter のような配列メソッドの型が読めるようになる。map に渡す関数が何を受け取って何を返すのか、TypeScript は配列の型から自動で分かってくれるよ。string[] に map すれば、渡した関数の引数は書かなくても string だと分かってもらえる。型推論という言葉で呼ばれるこの働きが、いちばんありがたく感じられる場面だ。

そう、型はいつも全部書かなければいけないわけではない。分かりきっているところは書かないほうが読みやすい。この章では「書いたほうがいいところ」と「任せていいところ」の線引きにも触れるよ。目安はひとつ、他人との境目には書く。関数の引数と戻り値は境目だから書く。関数の中の一時的な変数は書かなくていい。

この章を終えると、関数まわりで型に困ることはほとんどなくなる。そして map の中で補完が効く快適さを知ってしまうと、もう型なしには戻れなくなるはずだよ。