この動画はメンバー限定動画です

全ての講座が
月額990円で学び放題

講座の情報を見る

TypeScript入門メソッドをオーバーライドしよう

記事を共有:

  • X
  • Pocket
  • クリップボードにコピー

子クラスを定義すると、親クラスのプロパティやメソッドを継承することができますが、場合によってはメソッドの動きを変化させたい場合があります。そんな時は、メソッドを「オーバーライド」すると良いでしょう。同じメソッド名で、親クラスと子クラスの動作を変化させることができます。

税込金額を計算するメソッドを作ろう

ここでは、Itemという親クラスで消費税を足す「getTaxPrice」というメソッドを定義します。次のようにしましょう。

// class03.ts
class Item {
  name: string = "";
  price: number = 0;

  getTaxPrice(): number {
    return this.price * 1.1; // 10%
  }
}

これで、10%の消費税率を加算するメソッドができました。次のように利用してみましょう。

const pencil = new Item();
pencil.price = 80;
console.log(pencil.getTaxPrice()); // 88

こうして、消費税込みの金額を求めることができます。

子クラスの消費税を8%にしよう

ではここで、「Food」という子クラスを定義します。Itemクラスを継承しましょう。

class Food extends Item {
}

しかしここで、Foodクラスの場合は消費税の税率を8%にしたいとします。そこで「getTaxPrice」メソッドをオーバーライドして税率を変更しましょう。次のように、同じメソッド名のメソッドを定義します。

class Food extends Item {
  getTaxPrice(): number {
    return this.price * 1.08; // 8%
  }
}
...
console.log(peach.getTaxPrice()); // 162

すると、Foodクラスのインスタンスの場合だけ税込金額が変化しました。

同じメソッドを呼び出していても、どのクラスのインスタンスかによって、動きを変えることができます。こうして、親クラスを継承した子クラスでは、親クラスと共通の部分は親クラスのものをそのまま使い、小クラスで独自に変化させたい場合は、プロパティやメソッドを増やしたり、オーバーライドして動きを変化させることができるというわけです。

前のレッスン 次のレッスン