TypeScript継承

要約: このチュートリアルでは、TypeScript継承の概念と、それを使用して他のクラスの機能を再利用する方法について学習します。

TypeScript継承の紹介

クラスは、別のクラスのプロパティとメソッドを再利用できます。これをTypeScriptにおける継承と呼びます。

プロパティとメソッドを継承するクラスは子クラスと呼ばれます。プロパティとメソッドが継承されるクラスは親クラスとして知られています。これらの名称は、子供は親から遺伝子を受け継ぐという性質に由来しています。

継承を使用すると、既存のクラスの機能を書き直すことなく再利用できます。

JavaScriptは、JavaやC#のような古典的継承ではなく、プロトタイプ継承を使用します。ES6はクラス構文を導入しますが、これは単にプロトタイプ継承の構文的な砂糖でしかありません。TypeScriptはES6と同様の継承をサポートしています。

次のPersonクラスがあるとします。

class Person {
  constructor(private firstName: string, private lastName: string) {}
  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  describe(): string {
    return `This is ${this.firstName} ${this.lastName}.`;
  }
}Code language: TypeScript (typescript)

クラスを継承するには、extendsキーワードを使用します。たとえば、次のEmployeeクラスはPersonクラスを継承しています。

class Employee extends Person {
  //...
}Code language: TypeScript (typescript)

この例では、Employeeは子クラスで、Personは親クラスです。

コンストラクター

PersonクラスにはfirstNameプロパティとlastNameプロパティを初期化するコンストラクターがあるため、Employeeクラスのコンストラクターでこれらのプロパティを、親クラスのコンストラクターを呼び出すことで初期化する必要があります。

子クラスのコンストラクターで親クラスのコンストラクターを呼び出すには、super()構文を使用します。たとえば

class Employee extends Person {
    constructor(
        firstName: string,
        lastName: string,
        private jobTitle: string) {
        
        // call the constructor of the Person class:
        super(firstName, lastName);
    }
}Code language: TypeScript (typescript)

以下はEmployeeクラスのインスタンスを作成します

let employee = new Employee('John','Doe','Front-end Developer');Code language: TypeScript (typescript)

EmployeeクラスはPersonクラスのプロパティとメソッドを継承するため、employeeオブジェクトでgetFullName()メソッドとdescribe()メソッドを次のように呼び出すことができます。

let employee = new Employee('John', 'Doe', 'Web Developer');

console.log(employee.getFullName());
console.log(employee.describe());
Code language: TypeScript (typescript)

出力

John Doe
This is John Doe.Code language: TypeScript (typescript)

メソッドのオーバーライド

employeeオブジェクトでemployee.describe()メソッドを呼び出すと、Personクラスのdescribe()メソッドが実行され、メッセージ「This is John Doe」が表示されます。

Employeeクラスに独自のバージョンdescribe()メソッドを持たせたい場合は、Employeeクラスで次のように定義できます。

class Employee extends Person {
    constructor(
        firstName: string,
        lastName: string,
        private jobTitle: string) {

        super(firstName, lastName);
    }

    describe(): string {
        return super.describe() + `I'm a ${this.jobTitle}.`;
    }
}Code language: TypeScript (typescript)

describe()メソッドでは、super.methodInParentClass()構文を使用して親クラスのdescribe()メソッドを呼び出しました。

employeeオブジェクトでdescribe()メソッドを呼び出すと、Employeeクラスのdescribe()メソッドが呼び出されます。

let employee = new Employee('John', 'Doe', 'Web Developer');
console.log(employee.describe());Code language: TypeScript (typescript)

出力

This is John Doe.I'm a Web Developer.Code language: TypeScript (typescript)

まとめ

extendsキーワードを使用して、クラスが別のクラスから継承できるようにします。
super()を使用して、子クラスのコンストラクターで親クラスのコンストラクターを呼び出します。また、super.methodInParentClass()構文を使用して、子クラスのメソッドでmethodInParentClass()を呼び出します。

この記事は役立ちましたか?