【TypeScript】superの役割について図解で解説する

はじめに

superの役割について以下まとめます。

本題

全体観

superの役割を図で示すと下記の通りになります。

また、具体例を交えたソースコードを記述すると下記のようになります。

// 親クラス
class Parent {
  constructor(public lastName: string, public firstName: string, public age: number) {
  }

  doIntroduction(this: Parent): string {
    return `Hello! My name is ${this.firstName} ${this.lastName}. I am ${this.age} years old.`;
  }
}

// 子クラス
class Child extends Parent {
  constructor(public lastName: string, public firstName: string, public age: number, public hobby: string) {
    super(lastName, firstName, age);
    this.hobby = hobby;
  }

  doDetailIntroduction(this: Child): string {
    return super.doIntroduction() + ` My Hobby is ${this.hobby}.`;
  }
}

// ①親クラスのコンストラクタ関数→親クラスの関数の呼び出し
const father = new Parent("Taro", "Tanaka", 52);
const introduceFather = father.doIntroduction();
console.log(introduceFather); // "Hello! My name is Tanaka Taro. I am 52 years old."

// ②子クラスのコンストラクタ関数→親クラスの関数の呼び出し
const myself = new Child("Jiro", "Tanaka", 24, "soccer");
const introduceMyself = myself.doIntroduction();
console.log(introduceMyself); // "Hello! My name is Tanaka Jiro. I am 24 years old."

// ③子クラスのコンストラクタ関数→子クラスの関数の呼び出し
const introduceDetailMyself = myself.doDetailIntroduction();
console.log(introduceDetailMyself); // "Hello! My name is Tanaka Jiro. I am 24 years old. My Hobby is soccer."

superはどんな時に役立つ？

継承先の関数を呼び出す時に役立ちます。
継承とは、上図のように、子クラス(Childクラス)から親クラス(Parentクラス)を呼んで、子クラスだけでなく親クラスの関数を使えるようにした関係をいいます。これにより継承は、コーディングの手間が省けることで可読性が向上し、さらに機能を拡張しやすくなる利点があります。

そんな継承先の関数を呼び出す時に使えるのがsuperメソッドになります。
そのため、上記のソースコードにおける「②子クラスのコンストラクタ関数→親クラスの関数の呼び出し」が可能になります。

どのようにsuperメソッドを使うの？

コンストラクタ関数の呼び出し

super(変数1,変数2,変数3...)にて、親クラスのコンストラクタ関数を呼び出すことができます。

親クラスの関数の呼び出し

super.関数()にて、親クラスの関数を呼び出すことができます。

最後に

今回は、superメソッドについて解説しました。
今までしっかりと理解できていなかったのですが、アウトプットしたことでかなり整理できたなと思いました。