【TypeScript】class継承の基本的な使い方

TypeScriptのclassの継承について学んだのでアウトプットします。

classの継承
継承の書き方
継承を使ってみる
1. constructorと継承

classの継承

先に作成したクラスと似たようクラスを作成（重複したメソッドやプロパティを持ちたいクラス）したい場合、継承を使うと便利です。

継承の書き方

以下のように「extends」を記載し継承したいクラス名を書きます。{ }の中には継承したいクラスの差分を記載します。

class クラス名 extends 継承したいクラス {
　継承したいクラスの差分（プロパティやメソッドなど）
}

継承を使ってみる

実際にコードを見て継承の動きをみてみます。

次のようにSuperHeroクラスはHeroクラスを継承しています。const a = new SuperHero(); でSuperHeroをインスタンス化し、その下で２つのメソッドを呼ぶ処理を記載しています。SuperHeroクラスにattackメソッドはありませんが正しく動作しています。これはSuperHeroクラスはHeroクラスを継承しているためHeroクラスのメソッドを呼ぶことができているということになります(プロパティも同様)。

class Hero { //継承したいクラス
  public hp:number = 100;
  attack() {
     console.log('攻撃した');
  }
  run() {
    console.log('逃げ出した');
  }
}

class SuperHero extends Hero { //Heroクラスを継承したSuperHeroクラス
  protect(){
    console.log('防御する');
  }
}

const a = new SuperHero();
a.protect(); //逃げ出した
a.attack(); //攻撃した
console.log(a.hp); //100

constructorと継承

次のように継承したいクラスにコンストラクターがあり、継承したクラスにもコンストラクターがある場合、継承したいクラスに引数を渡す必要があります。このように継承したいクラスのコンストラクターに引数を渡すには「super(引数)」と記載します。実装結果は以下となります。

class Hero {//継承したいクラス
  constructor(private heroName: string,public hp:number) {
  }
  attack() {
     console.log(this.heroName + 'は攻撃した');
  }
}

class SuperHero extends Hero {
  constructor(superHeroName: string) {
    super(superHeroName, 100); //継承したいクラスのコンストラクターに引数を渡す
  }
  checkNow(){
    console.log('体力は' + this.hp + 'です');
  }
}

const a = new SuperHero('ひいろ');
a.checkNow(); //体力は100です
a.attack(); //ひいろは攻撃した

今後はもう少し勉強して記事をグレードアップさせていきたいです。。