👨‍💻

TypeScriptにおけるクラスのimplementsとextends

2024/06/14に公開

JavaScript

TypeScript

tech

implementsとextendsはどちらもクラスに関連していますが、異なる目的で使用されます。

`implements`の概要

目的: クラスが特定のインターフェースを実装することを示す。
使用方法: クラスがインターフェースで定義されたプロパティやメソッドを持つことを強制する。

例:

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

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

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

`extends`の概要

目的: クラスが他のクラスを継承することを示す。
使用方法: 基底クラス（親クラス）のプロパティやメソッドを派生クラス（子クラス）に引き継ぐ。派生クラスは基底クラスを拡張し、新しいプロパティやメソッドを追加できる。

例:

class Animal {
  name: string;

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

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

class Dog extends Animal {
  constructor(name: string) {
    super(name); // 親クラスのコンストラクタを呼び出す
  }

  makeSound(): void {
    console.log('Woof!'); // 親クラスのメソッドをオーバーライド
  }
}

主な違い

目的:
- implements: クラスがインターフェースで定義された契約を実装することを保証するために使用されます。インターフェースはオブジェクトの形状を定義するため、実際の動作は提供しません。
- extends: クラスが他のクラスを継承するために使用されます。親クラスのプロパティやメソッドを引き継ぎ、再利用および拡張するために使います。
対象:
- implements: インターフェースを対象とします。
- extends: 他のクラスを対象とします。
再利用:
- implements: 再利用されるのはインターフェースの定義だけであり、具体的な実装は含まれません。
- extends: 基底クラスの具体的な実装（プロパティやメソッド）が再利用されます。
多重:
- implements: クラスは複数のインターフェースを実装できます。
- extends: クラスは1つのクラスのみを継承できます（多重継承はサポートされていません）。

例を組み合わせる

次に、implementsとextendsを組み合わせた例を示します。

interface Flyable {
  fly(): void;
}

class Animal {
  name: string;

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

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

class Bird extends Animal implements Flyable {
  constructor(name: string) {
    super(name);
  }

  makeSound(): void {
    console.log('Chirp!');
  }

  fly(): void {
    console.log(`${this.name} is flying!`);
  }
}

この例では、BirdクラスはAnimalクラスを継承し、Flyableインターフェースを実装しています。これにより、BirdクラスはAnimalクラスのプロパティとメソッドを継承しつつ、Flyableインターフェースで定義されたflyメソッドも実装しています。

implementsの概要

extendsの概要

主な違い

例を組み合わせる

Discussion

`implements`の概要

`extends`の概要