extendsとimplementsを使いこなして、TypeScriptコードをレベルアップ！

2024-04-02

TypeScriptにおけるextendsとimplementsの違い

extends

extendsは、クラス継承に使用されます。あるクラスが別のクラスのプロパティとメソッドを受け継ぐことを可能にします。

例:

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

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Rex');
console.log(dog.name); // 'Rex'
dog.bark(); // 'Woof!'

上記の例では、DogクラスはAnimalクラスをextendsしています。そのため、Dogクラスはnameプロパティとconstructorメソッドを自動的に受け継ぎます。さらに、Dogクラスは独自のbark()メソッドを追加しています。

implements

implementsは、インターフェースの実装に使用されます。あるクラスがインターフェースで定義されたプロパティとメソッドを実装することを約束します。

interface Person {
  name: string;
  age: number;
  greet(): string;
}

class Employee implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet(): string {
    return `Hello, my name is ${this.name}`;
  }
}

const employee = new Employee('John Doe', 30);
console.log(employee.name); // 'John Doe'
console.log(employee.age); // 30
console.log(employee.greet()); // 'Hello, my name is John Doe'

上記の例では、EmployeeクラスはPersonインターフェースをimplementsしています。そのため、Employeeクラスはnameプロパティ、ageプロパティ、greet()メソッドを実装する必要があります。

extendsはクラス継承に使用し、プロパティとメソッドを受け継ぐ。
implementsはインターフェースの実装に使用し、プロパティとメソッドを実装する。

ポイント

クラスはextendsキーワードを使って1つのクラスのみを継承できる。
クラスはimplementsキーワードを使って複数のインターフェースを実装できる。
インターフェースはextendsキーワードを使用できない。

これらの違いを理解することで、TypeScriptにおけるコードの構造と意味をより明確に理解することができます。

クラス継承

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    console.log(`I am an animal. My name is ${this.name}`);
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Rex');
dog.speak(); // 'I am an animal. My name is Rex'
dog.bark(); // 'Woof!'

Animalクラスは、nameプロパティとconstructorメソッド、speak()メソッドを持つ基底クラスです。
DogクラスはAnimalクラスをextendsし、bark()メソッドを追加しています。
dogオブジェクトはDogクラスのインスタンスであり、nameプロパティ、constructorメソッド、speak()メソッド、bark()メソッドを持つことができます。

インターフェースの実装

interface Person {
  name: string;
  age: number;
  greet(): string;
}

class Employee implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet(): string {
    return `Hello, my name is ${this.name}`;
  }
}

const employee = new Employee('John Doe', 30);
console.log(employee.name); // 'John Doe'
console.log(employee.age); // 30
console.log(employee.greet()); // 'Hello, my name is John Doe'

解説:

Personインターフェースは、nameプロパティ、ageプロパティ、greet()メソッドを持つ型を定義します。
employeeオブジェクトはEmployeeクラスのインスタンスであり、nameプロパティ、ageプロパティ、greet()メソッドを持つことができます。

複数のインターフェースの実装

interface Animal {
  name: string;
  speak(): string;
}

interface Person {
  age: number;
  greet(): string;
}

class Employee implements Animal, Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  speak(): string {
    return `I am an animal. My name is ${this.name}`;
  }
  greet(): string {
    return `Hello, my name is ${this.name}`;
  }
}

const employee = new Employee('John Doe', 30);
console.log(employee.name); // 'John Doe'
console.log(employee.age); // 30
console.log(employee.speak()); // 'I am an animal. My name is John Doe'
console.log(employee.greet()); // 'Hello, my name is John Doe'

EmployeeクラスはAnimalインターフェースとPersonインターフェースをimplementsし、両方のインターフェースで定義されたプロパティとメソッドを実装しています。

これらのサンプルコードは、extendsとimplementsキーワードの使用方法をより深く理解するのに役立ちます。

extends と implements のその他の使用方法

extends キーワードを使用して抽象クラスを継承することができます。抽象クラスは、子クラスが実装しなければならない抽象メソッドを持つクラスです。

abstract class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  abstract speak(): string;
}

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
  speak(): string {
    return `I am a dog. My name is ${this.name}`;
  }
}

const dog = new Dog('Rex');
dog.speak(); // 'I am a dog. My name is Rex'

Animalクラスは抽象クラスであり、抽象メソッドspeak()を持っています。

ジェネリック型

extends キーワードを使用してジェネリック型を継承することができます。ジェネリック型は、型パラメータを使用して異なる型を受け入れることができる型です。

interface Container<T> {
  item: T;
}

class Box<T> implements Container<T> {
  item: T;
  constructor(item: T) {
    this.item = item;
  }
}

const box = new Box('Hello, world!');
console.log(box.item); // 'Hello, world!'

Containerインターフェースはジェネリック型であり、型パラメータTを受け入れます。

ミックスイン

implements キーワードを使用してミックスインを実装することができます。ミックスインは、複数のクラスに共通する機能を提供するオブジェクトです。

interface Logger {
  log(message: string): void;
}

class MyClass implements Logger {
  log(message: string): void {
    console.log(message);
  }
}

const myClass = new MyClass();
myClass.log('Hello, world!'); // 'Hello, world!'