Mehrfachvererbung in TypeScript

1. Einfache Vererbung in TypeScript
2. Mehrfachvererbung mit TypeScript-Klassen
3. Mehrfachvererbung mit TypeScript-Schnittstellen
4. Mehrfachvererbung mit TypeScript-Mixins

Es gibt mehrere Programmierparadigmen, die sich im Laufe der Jahre entwickelt haben. Objektorientierte Programmierung (OOP) ist eines der wichtigsten Paradigmen, das auf realen Entitäten und deren Interaktion basiert.

Vererbung ist eines der bekannten OOP-Konzepte, das es ermöglicht, die Eigenschaften und Verhaltensweisen der übergeordneten Entität von untergeordneten Entitäten zu erwerben.

Einfache Vererbung in TypeScript

TypeScript unterstützt bis zu einem gewissen Grad OOP-Techniken. Es unterstützt das Vererben von einer übergeordneten Entität, sodass Programmierer ihren Code effektiv wiederverwenden können.

Wir können von einer übergeordneten Entität erben, indem wir das Schlüsselwort extends verwenden, wie im Folgenden gezeigt.

class Animal {
    constructor() {
        console.log("Animal class");
    }
}

class Cat extends Animal {

    constructor() {
        super();
    }
}

const cat = new Cat();

Ausgabe:

"Animal class"

Dies wird als einfache Vererbung bezeichnet, bei der sich die angegebene Klasse auf nur eine Elternklasse erstrecken kann.

Mehrfachvererbung mit TypeScript-Klassen

Es ist möglich, Eigenschaften und Verhaltensweisen von mehr als einer übergeordneten Entität in Java-ähnlichen Sprachen zu erwerben. Dies wird als Mehrfachvererbung bezeichnet.

TypeScript unterstützt keine Mehrfachvererbung.

Versuchen wir, mehrere übergeordnete Klassen in TypeScript mit extends zu erweitern.

class Engineer {
    constructor() {
        console.log("Employee class");
    }
}

class Person {
    constructor() {
        console.log("Person class");
    }
}

class Employee extends Engineer, Person {
}

Lassen Sie uns dann den TypeScript-Code transpilieren, wie im Folgenden gezeigt.

tsc example1.ts

Ausgabe:

Wie erwartet gibt es einen Fehler, dass TypeScript nur das Erweitern einer einzelnen Klasse zulässt.

Mehrfachvererbung mit TypeScript-Schnittstellen

TypeScript-Schnittstellen unterstützen die Mehrfachvererbung standardmäßig. Sie können mehr als eine Klasse erweitern.

Lassen Sie uns zwei Klassen erstellen, Person und Engineer, und einige Dummy-Methoden hinzufügen.

class Person {
    name: string;

    constructor() {
       console.log("Person class");
    }

    sayImAPerson(){
        console.log("Hey, I am a person");
    }
}

class Engineer {
    salary: number;
    constructor() {
        console.log("Engineer class");
    }
    sayImAnEngineer(){
        console.log("I am an engineer too");
    }
}

Als Nächstes erstellen wir einen neuen Typ oder eine neue Klasse, um die beiden oben genannten Klassen zu erweitern.

class Employee {
    empId: string;
}

Da die Klasse Employee nicht mehr als eine übergeordnete Klasse erweitern kann, sollten wir eine Schnittstelle mit dem gleichen Namen Employee verwenden, um das Zusammenführen von TypeScript-Deklarationen zu verwenden. Auf diese Weise können Sie Schnittstellen und Klassen zusammenführen.

Lassen Sie uns die Schnittstelle Employee erstellen, die die Klassen Person und Engineer erweitert, wie im Folgenden gezeigt.

interface Employee extends Person, Engineer {
}

Lassen Sie uns den TypeScript-Code transpilieren und prüfen, ob wir Fehler erhalten.

Ausgabe:

Wie erwartet gibt es keine Fehler bei der Verwendung von extends mit mehr als einer übergeordneten Klasse innerhalb der Schnittstellendeklaration. Daher unterstützt die Schnittstelle mehrere Vererbungen.

Aber es gibt immer noch ein Problem, wenn wir eine Methode innerhalb der geerbten Klasse aufrufen. Wir haben keinen Zugriff auf die Methodenimplementierungen.

Versuchen wir, die Methode sayImAnEngineer() aufzurufen.

let emp: Employee = new Employee;
emp.sayImAnEngineer();

Wir sollten den Code zuerst transpilieren; es wird keinen Fehler geben. Versuchen Sie dann, das generierte JavaScript auszuführen. es würde einen Fehler auslösen, wie in der folgenden Ausgabe gezeigt.

Ausgabe:

TypeScript konnte die Methode sayImAnEngineer nicht finden. Wir können dies überwinden, indem wir TypeScript mixins verwenden.

Mehrfachvererbung mit TypeScript-Mixins

Der TypeScript-Mixins-Mechanismus kann alle in den übergeordneten Klassen verfügbaren Methoden in die abgeleitete Klasse oder Unterklasse kopieren. Die Mixin-Erstellungsmethode sollte alle Eigenschaften in den übergeordneten Klassen durchlaufen und den Inhalt abrufen.

Dann sollte der gesamte Inhalt in der abgeleiteten Klasse so eingestellt werden, wie er ist. Es gibt eine Methode, die von der offiziellen TypeScript-Dokumentation bereitgestellt wird: mixin creation method.

Es wird empfohlen, es in Ihrer TypeScript-Datei zu verwenden, wie im Folgenden gezeigt.

function applyMixins(derivedCtor: any, constructors: any[]) {
  constructors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
      );
    });
  });
}

Fügen wir die Methode applyMixins in unser TypeScript-Beispiel ein.

class Person {
    name: string;

    constructor() {
       console.log("Person class");
    }

    sayImAPerson(){
        console.log("Hey, I am a person");
    }
}

class Engineer {
    salary: number;
    constructor() {
        console.log("Engineer class");
    }
    sayImAnEngineer(){
        console.log("I am an engineer too");
    }
}

class Employee {
    empId: string;
}

interface Employee extends Person, Engineer {

}

function applyMixins(derivedCtor: any, constructors: any[]) {
  constructors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
      );
    });
  });
}

Rufen wir nun die Methode applyMixins auf, wie im Folgenden gezeigt.

applyMixins(Employee, [Person, Engineer]);

Der erste Parameter sollte die abgeleitete Klasse sein; in diesem Fall ist es die Klasse Employee. Der nächste Parameter ist ein Array, das alle übergeordneten Klassen enthält, die die abgeleitete Klasse erweitern würde.

Schließlich erstellen wir ein Employee-Objekt und rufen die sayImAnEngineer-Methode aus der Engineer-Elternklasse auf.

let emp: Employee = new Employee;
emp.sayImAnEngineer();

Ausgabe:

Diesmal gibt es keine Fehler; es bedeutet, dass die Mixins-Technik funktioniert hat. Auf diese Weise können Sie die Mehrfachvererbung in TypeScript implementieren.