受けついだクラスに型をつける

01 / 05

extends の書き方は変わらない

親のクラスを受けつぐ書き方は JavaScript のときと同じ class 子 extends 親 だよ。親が宣言したフィールドを、子でもう一度書く必要はない。

型もいっしょに受けつぐので、子のインスタンスから読んだ namae は string として扱われる。

class Doubutsu {  namae: string;  constructor(namae: string) {    this.namae = namae;  }}class Inu extends Doubutsu {}const inu = new Inu("ぽち");console.log(inu.namae);

実行結果

ぽち

02 / 05

子で足すものは子で宣言する

子だけが持つフィールドは、子のクラスの中で宣言する。そして子に constructor を書いたら、いちばん先に super(...) を呼ぶ。親のぶんの用意を親に任せる合図だよ。

忘れると「派生クラスのコンストラクターには 'super' の呼び出しを含める必要があります」と教えてくれる。

class Doubutsu {  namae: string;  constructor(namae: string) {    this.namae = namae;  }}class Inu extends Doubutsu {  iro: string;  constructor(namae: string, iro: string) {    super(namae);    this.iro = iro;  }}const inu = new Inu("ぽち", "ちゃいろ");console.log(inu.iro);

実行結果

ちゃいろ

03 / 05

親のメソッドを上書きする

親と同じ名前のメソッドを子に書くと、子のほうが使われる。オーバーライドだったね。

型を書いておくと、上書きしたつもりがまったく別のメソッドになっていたという事故を防げる。引数と戻り値の形がそろっているかを見てもらえるからだよ。

class Doubutsu {  naku(): string {    return "なにかなく";  }}class Neko extends Doubutsu {  naku(): string {    return "にゃー";  }}console.log(new Doubutsu().naku());console.log(new Neko().naku());

実行結果

なにかなく
にゃー

04 / 05

形がずれていると止めてくれる

親の naku は string を返すのに、子では number を返すように書いてしまった場合。JavaScript なら黙って動いて、文字列のつもりの値が数値だったとあとで気づくところだよ。

エラーは3行に分かれて出る。下にいくほど細かくなるので、いちばん下から読むといい。「型 'number' を型 'string' に割り当てることはできません」— 章1で見たのと同じ言い分だね。

class Doubutsu {  naku(): string {    return "なにかなく";  }}class Inu extends Doubutsu {  naku(): number {    return 1;  }}

実行結果

型のエラー: 型 'Inu' のプロパティ 'naku' を基本データ型 'Doubutsu' の同じプロパティに割り当てることはできません。
  型 '() => number' を型 '() => string' に割り当てることはできません。
    型 'number' を型 'string' に割り当てることはできません。

05 / 05

親の処理に足す

上書きしたメソッドの中で super.メソッド名() と書くと、親のほうの処理を呼べる。親のやることに足すだけ、というときに使うよ。

戻り値の型も受けついでいるので、super.naku() の結果はそのまま string として使える。ここから書いてみよう。

class Doubutsu {  naku(): string {    return "なにかなく";  }}class Inu extends Doubutsu {  naku(): string {    return super.naku() + "・わん";  }}console.log(new Inu().naku());

実行結果

なにかなく・わん