TypeScript クラス拡張方法

Typescript で 2 つのクラスを拡張する方法

TypeScript では、クラスの拡張 (inheritance) を使用して、既存のクラスの機能を再利用し、新しいクラスを作成することができます。これを ミックスイン と呼びます。

インターフェイスの使用

• 新しいクラスを作成し、両方のクラスを拡張します。
• 両方のクラスをこのインターフェイスを実装するようにします。
• インターフェイス を定義して、両方のクラスで共有するプロパティとメソッドを指定します。

interface MyInterface {
  commonMethod(): void;
}

class ClassA implements MyInterface {
  // ClassA のメソッド
  commonMethod() {
    console.log("ClassA's common method");
  }
  specificMethodA() {
    console.log("ClassA's specific method");
  }
}

class ClassB implements MyInterface {
  // ClassB のメソッド
  commonMethod() {
    console.log("ClassB's common method");
  }
  specificMethodB() {
    console.log("ClassB's specific method");
  }
}

class CombinedClass extends ClassA implements MyInterface {
  // CombinedClass のメソッド
  combinedMethod() {
    console.log("CombinedClass's combined method");
  }
}

ミックスインの使用 (Mixins)

• TypeScript では、ミックスインを関数として実装し、その関数内でクラスのメソッドを追加します。
• ミックスイン は、複数のクラスからメソッドやプロパティを組み合わせて新しいクラスを作成するためのデザインパターンです。

function Mixin(baseClass: any) {
  return class extends baseClass {
    mixedMethod() {
      console.log("Mixed method");
    }
  };
}

class ClassC {
  // ClassC のメソッド
  specificMethodC() {
    console.log("ClassC's specific method");
  }
}

class CombinedClass2 extends Mixin(ClassC) {
  // CombinedClass2 のメソッド
  combinedMethod2() {
    console.log("CombinedClass2's combined method");
  }
}

interface MyInterface {
  commonMethod(): void;
}

class ClassA implements MyInterface {
  // ClassA のメソッド
  commonMethod() {
    console.log("ClassA's common method");
  }
  specificMethodA() {
    console.log("ClassA's specific method");
  }
}

class ClassB implements MyInterface {
  // ClassB のメソッド
  commonMethod() {
    console.log("ClassB's common method");
  }
  specificMethodB() {
    console.log("ClassB's specific method");
  }
}

class CombinedClass extends ClassA implements MyInterface {
  // CombinedClass のメソッド
  combinedMethod() {
    console.log("CombinedClass's combined method");
  }
}

解説

• CombinedClass は、ClassA を拡張し、MyInterface を実装しています。これにより、ClassA のメソッドと MyInterface のメソッドを継承します。
• ClassA と ClassB は、それぞれ独自のメソッド (specificMethodA, specificMethodB) を持ち、MyInterface を実装しています。
• MyInterface インターフェイスは、両方のクラスで共有する commonMethod を定義しています。

ミックスインを使用した拡張

function Mixin(baseClass: any) {
  return class extends baseClass {
    mixedMethod() {
      console.log("Mixed method");
    }
  };
}

class ClassC {
  // ClassC のメソッド
  specificMethodC() {
    console.log("ClassC's specific method");
  }
}

class CombinedClass2 extends Mixin(ClassC) {
  // CombinedClass2 のメソッド
  combinedMethod2() {
    console.log("CombinedClass2's combined method");
  }
}

• CombinedClass2 は、Mixin(ClassC) を拡張しています。これにより、ClassC のメソッドと Mixin 関数で追加された mixedMethod を継承します。
• ClassC は、独自のメソッド (specificMethodC) を持っています。
• Mixin 関数は、ベースクラスを受け取り、新しいクラスを返します。新しいクラスは、ベースクラスのメソッドに加えて、mixedMethod を持っています。

委譲 (Delegation)

• 委譲を使用すると、クラスの継承を避けることができ、より柔軟な設計が可能になります。
• 委譲 は、クラスが別のクラスのインスタンスを保持し、そのインスタンスのメソッドを呼び出すことで、そのクラスの機能を再利用する方法です。

class ClassA {
  // ClassA のメソッド
  methodA() {
    console.log("ClassA's methodA");
  }
}

class ClassB {
  // ClassB のメソッド
  methodB() {
    console.log("ClassB's methodB");
  }
}

class CombinedClass {
  private classA: ClassA;
  private classB: ClassB;

  constructor() {
    this.classA = new ClassA();
    this.classB = new ClassB();
  }

  combinedMethod() {
    this.classA.methodA();
    this.classB.methodB();
  }
}

コンポジション (Composition)

class ClassA {
  // ClassA のメソッド
  methodA() {
    console.log("ClassA's methodA");
  }
}

class ClassB {
  // ClassB のメソッド
  methodB() {
    console.log("ClassB's methodB");
  }
}

class CombinedClass {
  private classA: ClassA;
  private classB: ClassB;

  constructor() {
    this.classA = new ClassA();
    this.classB = new ClassB();
  }

  combinedMethod() {
    this.classA.methodA();
    this.classB.methodB();
  }
}