TypeScript - 継承

こんにちは、未来のプログラマーたち！今日は、TypeScriptの継承の世界への興味深い旅に出発します。あなたの近所の親切なコンピュータ教師として、私はこの魅力的なトピックをガイドするためにここにいます。では、バーチャルのバックパックを持ち出して、一緒に潜りましょう！

TypeScript - Inheritance

継承とは何か？

始める前に、継承が実際に何を意味するかを理解しましょう。家族の系図を考えてみてください。新しい世代は親から特定の特性を受け継ぎます。プログラミングでは、継承も同様に働きます。新しいクラスが既存のクラスに基づいて作成され、そのプロパティとメソッドを受け継ぎます。すごいですね？

単一クラス継承

では、最もシンプルな形の継承、単一クラス継承から始めましょう。これは、1つのクラス（子クラス）が他のクラス（親クラス）から継承する場合です。

基本例

class Animal {
name: string;

constructor(name: string) {
this.name = name;
}

makeSound(): void {
console.log("Some generic animal sound");
}
}

class Dog extends Animal {
breed: string;

constructor(name: string, breed: string) {
super(name);
this.breed = breed;
}

makeSound(): void {
console.log("Woof! Woof!");
}
}

let myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.name);  // 出力: Buddy
console.log(myDog.breed); // 出力: Golden Retriever
myDog.makeSound();        // 出力: Woof! Woof!

この例では、DogはAnimalから継承しています。extendsキーワードは、他のクラスの子としてクラスを作成するために使用されます。

説明

我们定义了一个基础的Animalクラス，它有一个name属性和一个makeSoundメソッド。
然后我们创建了一个Dogクラス，它继承自Animal。
Dogクラスには独自のbreed属性があります。
我们在Dog构造函数中使用super关键字来调用Animal构造函数。
我们在Dogクラス中重写了makeSoundメソッド。

Superキーワード

前の例でsuperキーワードに注意したかもしれません。それでは、もっと深くその機能を見てみましょう。

Superを使用した例

class Vehicle {
make: string;
model: string;

constructor(make: string, model: string) {
this.make = make;
this.model = model;
}

getInfo(): string {
return `${this.make} ${this.model}`;
}
}

class Car extends Vehicle {
numDoors: number;

constructor(make: string, model: string, numDoors: number) {
super(make, model);
this.numDoors = numDoors;
}

getInfo(): string {
return `${super.getInfo()} with ${this.numDoors} doors`;
}
}

let myCar = new Car("Toyota", "Corolla", 4);
console.log(myCar.getInfo()); // 出力: Toyota Corolla with 4 doors

説明

superキーワードはCar构造函数中使用されてVehicle构造函数を呼びます。
CarクラスのgetInfoメソッドではsuper.getInfo()を使用して親クラスのgetInfoメソッドを呼びます。

superキーワードは、オブジェクトの親で関数にアクセスし、呼び出すことを許可します。

メソッドオーバーライド

メソッドオーバーライドは、子クラスが親クラスで既に定義されているメソッドに対して特定の実装を提供する場合です。私たちは実際に前の例でこれを見てきました！

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

class Shape {
getArea(): number {
return 0;
}
}

class Circle extends Shape {
radius: number;

constructor(radius: number) {
super();
this.radius = radius;
}

getArea(): number {
return Math.PI * this.radius * this.radius;
}
}

class Rectangle extends Shape {
width: number;
height: number;

constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}

getArea(): number {
return this.width * this.height;
}
}

let myCircle = new Circle(5);
console.log(myCircle.getArea()); // 出力: 78.53981633974483

let myRectangle = new Rectangle(4, 5);
console.log(myRectangle.getArea()); // 出力: 20

説明

我们定义了一个基础的Shapeクラス，它有一个getAreaメソッド，它 returns 0。
CircleとRectangleクラスは共にShapeを継承し、getAreaメソッドを独自の実装でオーバーライドします。
Circleクラスはπr²の公式を使って面積を計算します。
Rectangleクラスは幅と高さをかけて面積を計算します。

多段継承

多段継承は、子クラスが他の子クラスから継承する場合です。これは、複数の世代を持つ家族の系図のようなものです。

多段継承の例

class Grandparent {
surname: string;

constructor(surname: string) {
this.surname = surname;
}

getSurname(): string {
return this.surname;
}
}

class Parent extends Grandparent {
firstName: string;

constructor(firstName: string, surname: string) {
super(surname);
this.firstName = firstName;
}

getFullName(): string {
return `${this.firstName} ${this.getSurname()}`;
}
}

class Child extends Parent {
middleName: string;

constructor(firstName: string, middleName: string, surname: string) {
super(firstName, surname);
this.middleName = middleName;
}

getFullName(): string {
return `${this.firstName} ${this.middleName} ${this.getSurname()}`;
}
}

let myChild = new Child("John", "Doe", "Smith");
console.log(myChild.getFullName()); // 出力: John Doe Smith

説明

我们定义了一个Grandparentクラス，它有一个surname属性。
ParentクラスはGrandparentを継承し、firstName属性を追加します。
ChildクラスはParentを継承し、middleName属性を追加します。
各クラスには独自のgetFullNameメソッドがあります。

継承メソッドの摘要

以下は、私たちが議論した主要なメソッドとキーワードの表です：

メソッド/キーワード	説明
`extends`	他のクラスの子としてクラスを作成するために使用
`super()`	親クラスのコンストラクターを呼びます
`super.method()`	親クラスのメソッドを呼びます
メソッドオーバーライド	子クラスでメソッドの新しい実装を提供します

そして、ここまでです！TypeScriptの継承の基本をカバーしました。実践が完璧を生むことを忘れずに、これらの概念を試してみてください。未来のTypeScriptの魔法使い、お楽しみください！

Credits: Image by storyset

前のチュートリアル:

TypeScript - 読み取り専用プロパティ

次のチュートリアル:

TypeScript - 静的メソッドとプロパティ