TypeScript - Klassen: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftiger Codingsuperstar! ? Bist du bereit, in die aufregende Welt der TypeScript-Klassen einzutauchen? Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen bei Null und bauen unseren Weg nach oben. Am Ende dieses Tutorials wirst du Klassen wie ein Profi erstellen! Also, lasst uns gemeinsam dieses Abenteuer beginnen.

Was sind Klassen?

Bevor wir ins Detail gehen, lassen wir uns klarmachen, was Klassen sind. Stell dir eine Klasse als.Blueprint für die Erstellung von Objekten vor. Genau wie Architekten Blueprints verwenden, um Häuser zu bauen, verwenden wir Klassen, um Objekte in unserem Code zu erstellen. Diese Objekte können Eigenschaften (wie die Farbe eines Hauses) und Methoden (wie das Öffnen einer Tür) haben.

Erstellen von Klassen

Lassen wir mit der Erstellung unserer ersten Klasse beginnen. Wir erstellen eine einfache Car-Klasse.

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep!");
}
}

Lassen wir das auseinandernehmen:

1. Wir beginnen mit dem class-Schlüsselwort, gefolgt vom Namen unserer Klasse, Car.
2. Innerhalb der Klasse definieren wir Eigenschaften: make, model und year.
3. Der constructor ist eine besondere Methode, die aufgerufen wird, wenn wir ein neues Car-Objekt erstellen. Er richtet die initialen Werte für unsere Eigenschaften ein.
4. Wir haben auch eine honk-Methode, die, wenn sie aufgerufen wird, "Beep beep!" in die Konsole schreibt.

Erstellen von Instanzobjekten

Nun, da wir unsere Car-Klasse haben, lassen uns einige tatsächliche Auto-Objekte erstellen!

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

Hier haben wir zwei Car-Objekte erstellt: myCar und yourCar. Das new-Schlüsselwort weist TypeScript an, eine neue Instanz unserer Car-Klasse zu erstellen.

Zugriff auf Attribute und Funktionen

Nun, da wir unsere Auto-Objekte haben, wie verwenden wir sie? Sehen wir uns das an:

console.log(myCar.make);  // Ausgabe: Toyota
console.log(yourCar.year);  // Ausgabe: 2019

myCar.honk();  // Ausgabe: Beep beep!

Wir verwenden die Punktnotation, um Eigenschaften und Methoden unserer Objekte zugreifen. Es ist so, als ob wir sagen: "Hey, myCar! Was ist dein Hersteller?" oder "Hey, myCar! Gib uns ein Horn!"

Klassenvererbung

Vererbung ist eine mächtige Funktion, die es uns ermöglicht, neue Klassen basierend auf bestehenden zu erstellen. Lassen wir eine SportsCar-Klasse erstellen, die von unserer Car-Klasse ableitet:

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`Rennfahren mit ${this.topSpeed} mph!`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // Ausgabe: Beep beep!
mySpeedster.race();  // Ausgabe: Rennfahren mit 210 mph!

Hier ist, was passiert:

1. Wir verwenden das extends-Schlüsselwort, um von Car abzuleiten.
2. Wir fügen eine neue Eigenschaft topSpeed hinzu.
3. In der Konstruktorfunktion rufen wir super() auf, um die Eigenschaften der übergeordneten Klasse zu initialisieren.
4. Wir fügen eine neue race-Methode hinzu, die spezifisch für SportsCar ist.

Unsere SportsCar hat alle Eigenschaften und Methoden von Car, plus ihre eigenen Ergänzungen!

Methodenüberschreibung

Manchmal möchten wir die Arbeitsweise einer Methode aus der übergeordneten Klasse in unserer Unterklasse ändern. Dies wird als Methodenüberschreibung bezeichnet. Lassen wir die honk-Methode in unserer SportsCar-Klasse überschreiben:

class SportsCar extends Car {
// ... vorheriger Code ...

honk() {
console.log("Vroom vroom!");
}
}

mySpeedster.honk();  // Ausgabe: Vroom vroom!

Nun, wenn wir honk() auf einem SportsCar aufrufen, macht es einen sportlicheren Sound!

Das static-Schlüsselwort

Das static-Schlüsselwort ermöglicht es uns, Eigenschaften und Methoden zu erstellen, die zur Klasse selbst gehören, nicht zu ihren Instanzen. Lassen wir eine statische Methode in unserer Car-Klasse hinzufügen:

class Car {
// ... vorheriger Code ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // Ausgabe: 4

Wir können diese Methode auf die Car-Klasse selbst aufrufen, ohne eine Instanz zu erstellen.

Der instanceof-Operator

Der instanceof-Operator ermöglicht es uns, zu überprüfen, ob ein Objekt eine Instanz einer bestimmten Klasse ist:

console.log(myCar instanceof Car);  // Ausgabe: true
console.log(mySpeedster instanceof SportsCar);  // Ausgabe: true
console.log(mySpeedster instanceof Car);  // Ausgabe: true
console.log(myCar instanceof SportsCar);  // Ausgabe: false

Dies ist nützlich, wenn du überprüfen musst, mit welchem Objekt du es zu tun hast.

Datenversteckung

In TypeScript können wir Zugriffsmodifikatoren verwenden, um die Sichtbarkeit von Klassenmitgliedern zu steuern. Die drei Zugriffsmodifikatoren sind public, private und protected:

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Unzureichende Mittel!");
}
}

protected getBalance() {
return this.balance;
}
}

• private: Nur innerhalb der Klasse zugänglich.
• public: Überall zugänglich (Standard, wenn nicht angegeben).
• protected: Zugänglich innerhalb der Klasse und deren Unterklassen.

Klassen und Schnittstellen

Schnittstellen in TypeScript ermöglichen es uns, einen Vertrag für unsere Klassen zu definieren. Lassen wir eine Schnittstelle für unsere Car-Klasse erstellen:

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... Implementierung ...
}

Durch die Implementierung einer Schnittstelle stellen wir sicher, dass unsere Klasse einer bestimmten Struktur folgt.

Methodenübersicht

Hier ist eine Zusammenfassung der Methoden, die wir in diesem Tutorial behandelt haben:

Methode	Beschreibung
constructor()	Initialisiert eine neue Instanz einer Klasse
honk()	Lässt das Auto hupen
race()	Simuliert das Rennen (für SportsCar)
static numberOfWheels()	Gibt die Anzahl der Räder zurück (für Car-Klasse)
deposit()	Fügt Geld zu einem Bankkonto hinzu
withdraw()	Entfernt Geld von einem Bankkonto
getBalance()	Gibt den aktuellen Kontostand eines Bankkontos zurück

Und das war's! Du hast deine ersten Schritte in die Welt der TypeScript-Klassen gemacht. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Konzepten zu experimentieren. Erstelle deine eigenen Klassen, kombiniere verschiedene Funktionen und vor allem: Spaß beim Coden! Wer weiß, vielleicht bist du der Nächste, der dieses Klassenthema unterrichtet! ?

Credits: Image by storyset