型をつける

JavaScript コースを終えたあなたは、値を扱い、条件で分け、くり返し、関数にまとめる書き方を手にしている。このコースで足すのは、たったひとつ「型」だけだよ。文法をまた一から覚え直すわけではない。書いてきた JavaScript は、そのまま TypeScript としても動く。

では、なぜ型が要るのか。JavaScript は、変数に何を入れても文句を言わない。数を入れるつもりの変数に文字列が入っても、そのまま動いてしまう。困るのは動いたあとだよ。"3" + 5 が 35 になって、計算がおかしいと気づいたときには、原因の行はずっと前にある。

TypeScript は、その取りちがえを実行する前に教えてくれる。「ここには文字列が入るはずなのに、数値を入れようとしているよ」と、書いているそばから指摘してくれるんだ。

書き方はとても素直だよ。名前のうしろに : を置いて、続けて型の名前を書く。文字列なら string、数値なら number、true / false なら boolean。この3つが、いちばんよく使う型だ。

配列にも型がある。string[] と書けば「文字列だけが入る配列」という意味になる。[] の前が中身の型だよ。中身がそろっていると保証されるので、あとから全部にまとめて処理をかけるときに安心できる。

そして、この章のいちばんの山場が 関数の型だ。引数に型を書き、返す値にも型を書く。こう書いておくと、まちがった値を渡したときに呼んだその行で止まってくれる。関数の中まで原因を探しに行かなくていい。何も返さない関数には void と書く。

ここで、TypeScript ならではの注意をひとつ。引数の型を書き忘れると怒られる。「パラメーターの型は暗黙的に any になります」というエラーがそれだよ。any は「どんな型でもよい」という意味で、これを許してしまうと型を書いた意味がなくなる。だから引数には必ず型を書こう。

型のエラーが出たら、まずそのまま読んでみるといい。この教材では TypeScript が出す日本語のメッセージをそのまま見せている。「型 'number' を型 'string' に割り当てることはできません」なら、「文字列を入れる約束の場所に数値を入れようとしている」ということだ。言っていることは意外と単純だよ。

そして大事なこと。型はあくまで動かす前のチェックのためのものだ。実行される直前に型はすべて取りのぞかれて、中身はただの JavaScript になる。だから console.log の出方も計算の結果も、JavaScript のときとまったく同じだよ。型を書いたから表示が変わる、ということは起きない。

エラーが出ると最初は「じゃまをされている」ように感じるかもしれない。でも、そのエラーは動かしたあとに自分で探すはずだったバグだよ。見つける場所が、実行後から実行前に移っただけだ。ここに慣れると、コードを書く手が速くなる。

この章を終えると、「この変数には何が入るか」「この関数は何を受け取って何を返すか」を、コードそのものに書き残せるようになる。これは自分のためであると同時に、あとで読む人（三日後の自分を含む）のための説明にもなるよ。