クラスに型をつける

JavaScript コースの章4でクラスを作ったのを覚えているかな。constructor で初期値を受け取って、this.namae に入れて、メソッドから使う。あの書き方に型をつけるのがこの章だよ。

じつは、JavaScript のときと同じようにクラスを書くと、TypeScript は怒る。「プロパティ namae はクラスに存在しません」というエラーが出るんだ。理由はこうだ。TypeScript にとってクラスは「どんなデータを持つか」の設計図でもある。だから constructor の中で急に this.namae が生えてくるのを許さない。先に「このクラスは namae: string を持つ」と宣言してから使う。これがクラスに型をつけるということだよ。

宣言してしまえば、あとは楽になる。this. と打った時点で持っているプロパティの候補が出るし、打ちまちがえればその場で赤くなる。メソッドの引数と戻り値も、ふつうの関数と同じように書けばいい。

次に扱うのが private だ。JavaScript では「外から触ってほしくない」を約束や命名で表すしかなかった。TypeScript にはそれを言葉で書ける仕組みがある。private を付けたプロパティは、クラスの外から読み書きしようとすると止められる。合わせて readonly も出てくるよ。作るときに決めて、あとは変えないもの — 学籍番号や生年月日のようなものに付ける。

private と readonly は、コードに書いた「使い方の説明」だと思ってほしい。コメントで「ここは直接いじらないでね」と書いても読まれないことがあるけれど、型で書けば読まれなくても守られる。

そして継承。extends で親のクラスを受けつぐ書き方も、型がつくと安全になる。親のメソッドを上書きするとき、引数の数や型がずれていたら教えてくれるんだ。JavaScript では黙って別のメソッドになってしまうところだよ。

そして implements だ。章2で書いた interface を、クラスに向かって「この形を満たします」と宣言する。書いておくと、必要なメソッドを書き忘れたときにクラス側でエラーになる。「あとで実装しよう」と思って忘れたまま動いてしまう、という事故が起きなくなるよ。

章の最後に、書く量を減らす書き方をひとつ覚える。ここまでの書き方だと、フィールドをひとつ持たせるのに「宣言する」「コンストラクタで受け取る」「this に入れる」の3回、同じ名前を書くことになる。TypeScript には、これを1回で済ませる短縮記法があるんだ。コンストラクタの引数に private や readonly を付けるだけで、同じ名前のフィールドが自動で作られて代入まで行われる。現場で見かけるクラスは、ほとんどがこの書き方だよ。

この章を終えると、JavaScript コースで書けるようになったものすべてに型をつけられるようになる。変数、配列、関数、オブジェクト、そしてクラス。ここが「型のある書き方」のひととおりだ。