TypeScript - Vererbung

Hallo, zukünftige Programmierer! Heute begeben wir uns auf eine aufregende Reise in die Welt der TypeScript-Vererbung. Als dein freundlicher Nachbar-Computerlehrer bin ich hier, um dich durch dieses faszinierende Thema zu führen. Also, packt eure virtuellen Rucksäcke und taucht ein!

Was ist Vererbung?

Bevor wir beginnen, lassen wir uns klarstellen, was Vererbung eigentlich bedeutet. Stell dir vor, du erstellst einen Stammbaum. Jede neue Generation erbt bestimmte Merkmale von ihren Eltern. In der Programmierung funktioniert Vererbung ähnlich. Sie ermöglicht es, dass eine neue Klasse auf eine bestehende Klasse basiert und deren Eigenschaften und Methoden erbt. Cool, oder?

Einfache Vererbung

Lassen wir mit der einfachsten Form der Vererbung beginnen: einfache Vererbung. Dies ist der Fall, wenn eine Klasse (Kindklasse) von einer anderen Klasse (Elterklasse) erbt.

Grundlegendes Beispiel

class Animal {
name: string;

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

makeSound(): void {
console.log("Ein allgemeines Tiergeräusch");
}
}

class Dog extends Animal {
breed: string;

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

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

let myDog = new Dog("Buddy", "Goldene Retriever");
console.log(myDog.name);  // Ausgabe: Buddy
console.log(myDog.breed); // Ausgabe: Goldene Retriever
myDog.makeSound();        // Ausgabe: Wuff! Wuff!

In diesem Beispiel erbt Dog von Animal. Der Operator extends wird verwendet, um eine Klasse zu erstellen, die ein Kind einer anderen Klasse ist.

Erklärung

1. Wir definieren eine Basisklasse Animal mit einer name Eigenschaft und einer makeSound Methode.
2. Dann erstellen wir eine Dog Klasse, die Animal erweitert.
3. Die Dog Klasse hat ihre eigene breed Eigenschaft.
4. Wir verwenden den Operator super im Dog Konstruktor, um den Animal Konstruktor aufzurufen.
5. Wir überschreiben die makeSound Methode in der Dog Klasse.

Super-Schlüsselwort

Vielleicht hast du das super Schlüsselwort in unserem vorherigen Beispiel bemerkt. Lassen wir uns tiefer in das ein, was es macht.

Beispiel mit 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()} mit ${this.numDoors} Türen`;
}
}

let myCar = new Car("Toyota", "Corolla", 4);
console.log(myCar.getInfo()); // Ausgabe: Toyota Corolla mit 4 Türen

Erklärung

1. Das super Schlüsselwort wird im Car Konstruktor verwendet, um den Vehicle Konstruktor aufzurufen.
2. In der getInfo Methode von Car verwenden wir super.getInfo(), um die getInfo Methode der Elterklasse aufzurufen.

Das super Schlüsselwort ermöglicht es uns, Funktionen auf einem Objekts Elter zu访问 und aufrufen.

Methodenüberschreibung

Methodenüberschreibung tritt auf, wenn eine Kindklasse eine spezifische Implementierung einer Methode bereitstellt, die bereits in ihrer Elterklasse definiert ist. Wir haben das tatsächlich in beiden vorherigen Beispielen gesehen!

Ein weiteres Beispiel für Methodenüberschreibung

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()); // Ausgabe: 78.53981633974483

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

Erklärung

1. Wir haben eine Basisklasse Shape mit einer getArea Methode, die 0 zurückgibt.
2. Sowohl Circle als auch Rectangle Klassen erweitern Shape und überschreiben die getArea Methode mit eigenen Implementierungen.
3. Die Circle Klasse berechnet die Fläche mit der Formel πr².
4. Die Rectangle Klasse berechnet die Fläche durch Multiplikation von Breite und Höhe.

Mehrebenenvererbung

Mehrebenenvererbung bezieht sich auf eine Kindklasse, die von einer anderen Kindklasse erbt. Es ist wie ein Stammbaum mit mehreren Generationen.

Beispiel für Mehrebenenvererbung

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()); // Ausgabe: John Doe Smith

Erklärung

1. Wir haben eine Grandparent Klasse mit einer surname Eigenschaft.
2. Die Parent Klasse erweitert Grandparent und fügt eine firstName Eigenschaft hinzu.
3. Die Child Klasse erweitert Parent und fügt eine middleName Eigenschaft hinzu.
4. Jede Klasse hat ihre eigene Implementierung der getFullName Methode.

Zusammenfassung der Vererbungsmethoden

Hier ist eine Tabelle, die die wichtigsten Methoden und Schlüsselwörter zusammenfasst, die wir besprochen haben:

Methode/Schlüsselwort	Beschreibung
extends	Wird verwendet, um eine Klasse als Kind einer anderen Klasse zu erstellen
super()	Ruft den Konstruktor der Elterklasse auf
super.method()	Ruft eine Methode aus der Elterklasse auf
Methodenüberschreibung	Bereitstellung einer neuen Implementierung für eine Methode in einer Kindklasse

Und das war's! Wir haben die Grundlagen der Vererbung in TypeScript behandelt. Denke daran, Übung macht den Meister, also zögere nicht, diese Konzepte auszuprobieren. Viel Spaß beim Programmieren, zukünftige TypeScript-Zauberer!

Credits: Image by storyset