TypeScript Classes definieren und verwenden
TypeScript Classes bieten eine klare und strukturierte Möglichkeit, Daten und Verhalten in einem Objekt zu organisieren. So können Sie Entitäten und Konzepte in Ihrem Code leichter modellieren.
Wozu dienen TypeScript Classes?
Klassen sind ein Schlüsselkonzept der Programmiersprache TypeScript, die auf JavaScript aufbaut. Sie stellen eine strukturierte Methode zur Definition von Objekten und zur Anwendung objektorientierter Programmierung (OOP) dar. TypeScript Classes ähneln Bauplänen für die Erzeugung von Objekten, die logisch zusammenhängende Daten und Methoden bündeln.
TypeScript enthält alle Funktionen von JavaScript und umfasst zusätzlich statische Typisierung. So können Sie Datentypen für TypeScript Functions, -Variablen und -Klassen angeben, um Fehler bei der Kompilierzeit zu erkennen. TypeScript-Klassen unterstützen neben Typsicherheit auch Konzepte wie Vererbung und Abstraktion, was die Entwicklung von komplexen Anwendungen erleichtert.
Mit TypeScript Classes können Sie eine klare Hierarchie von Klassen erstellen, die Eigenschaften und Methoden erben. So fördern Sie die Code-Wiederverwendung und Strukturierung. Konstruktoren in Klassen ermöglichen dabei die Initialisierung von Instanzen und die Sicherstellung einer konsistenten Objekterzeugung.
Das ist die Syntax von TypeScript Classes
Die Schreibweise von TypeScript-Klassen ähnelt der von ECMAScript 6 (ES6) und ist eine erweitere Version der JavaScript-Klassensyntax. Eine Klasse in TypeScript kann verschiedene Elemente beinhalten, um die Struktur und das Verhalten von Objekten zu definieren. Die wesentlichen Hauptbestandteile sind:
- Eigenschaften
- Konstruktor
- Methoden
Eigenschaften
Eigenschaften (Properties) bestimmen den Zustand eines Objekts. Sie speichern Datenwerte und können mit Datentypen annotiert werden, damit sie nur gültige Werte aufweisen.
class ClassName {
propertyName: propertyType;
}- ClassName: Der Name der Klasse
- propertyName: Der Name der Eigenschaft, die Sie definieren möchten
- propertyType: Der Datentyp der Eigenschaft
Hier ist ein konkretes Beispiel:
class Person {
name: string;
}Zuerst wird eine Klasse Person mit einer Eigenschaft name vom Typ string definiert. Dies bedeutet, dass Instanzen der Person-Klasse eine Eigenschaft name haben, die Zeichenketten (Strings) speichert.
Konstruktor
Der Konstruktor in TypeScript ist eine spezielle Methode, die beim Erzeugen einer Instanz (eines Objekts) einer Klasse aufgerufen wird. Sie benötigen ihn, um die Initialisierung der Eigenschaften (Properties) eines Objekts durchzuführen. Im Wesentlichen legt der Konstruktor den Anfangszustand einer Instanz fest. Sie können Parameter im Konstruktor angeben, um Werte bei der Instanziierung von TypeScript Classes zu übermitteln.
Die grundlegende Syntax eines Konstruktors in TypeScript lautet:
class ClassName {
constructor(parameter1: Type1, parameter2: Type2, ...) {
}
}- constructor: Jede Klasse kann einen einzigen Konstruktor haben. Wenn kein Konstruktor definiert ist, wird standardmäßig ein leerer Konstruktor erstellt.
- parameter: Type: Die Parameter sind optional, abhängig von der Klasse und ihren Anforderungen. Die Parameter sollten mit ihren Datentypen gekennzeichnet werden.
Ein Beispiel für einen Konstruktor:
class Person {
firstName: string;
lastName: string;
constructor(firstName: string, lastName: string) {
this.firstName = firstName;
this.lastName = lastName;
}
}In unserem Beispiel hat die Klasse Person einen Konstruktor, der zwei Parameter firstName und lastName akzeptiert. Beim Erstellen einer Instanz dieser Klasse werden diese Parameter übergeben, und der Konstruktor initialisiert die Eigenschaften firstName und lastName der Instanz mit den entsprechenden Werten. Das Schlüsselwort this bezieht sich auf die aktuelle Instanz der Klasse, auf der der Code ausgeführt wird.
Methoden
In TypeScript sind Methoden Funktionen, die in Klassen definiert und auf deren Instanzen angewendet werden können. Methoden erlauben Ihnen, bestimmte Aktionen oder Operationen im Kontext einer Klasse durchzuführen.
class ClassName {
// ...
methodName(parameter1: Type1, parameter2: Type2, ...): ReturnType {
}
// ...
}- methodName: Name der Methode
- parameter: Type: Optionale Parameter, die die Methode akzeptiert
- ReturnType: Dies ist der Datentyp, der bestimmt, welchen Wert die Methode zurückgibt. Wenn die Methode nichts zurückgibt, können Sie
voidangeben.
Um auf eine Eigenschaft zuzugreifen oder eine Methode auf einer Instanz einer Klasse aufzurufen, benutzen Sie den Punktoperator ., gefolgt von dem Methodennamen und den erforderlichen Argumenten, falls die Methode Parameter erwartet.
class Person {
firstName: string;
lastName: string;
constructor(firstName: string, lastName: string) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName(): string {
return this.firstName + " " + this.lastName;
}
}
const person = new Person("John", "Doe");
const fullName = person.getFullName();Die Methode getFullName dient dazu, den vollen Namen der Person zu erstellen und zurückzugeben. Sie greift auf die Werte der Eigenschaften firstName und lastName zu, die in der Klasse definiert und im Konstruktor initialisiert wurden. Das Objekt person wird durch das Schlüsselwort new gefolgt vom Klassennamen und den jeweiligen Parametern erzeugt. Die Methode konkateniert beim Aufruf die beiden Zeichenketten und gibt den vollen Namen als String zurück. Die Ausgabe für das Objekt person lautet daher „John Doe“.
Beispiele für die Anwendung von TypeScript Classes
TypeScript-Klassen besitzen verschiedene Mechanismen, um die Struktur und das Verhalten von Objekten zu organisieren und zu steuern. Im Folgenden stellen wir Ihnen einige Konzepte für den Einsatz von TypeScript Classes vor.
Sichtbarkeit
Sichtbarkeit in TypeScript-Klassen regelt den Zugriff auf Eigenschaften und Methoden innerhalb und außerhalb der Klasse. TypeScript bietet drei Sichtbarkeitsmodifikatoren: public, private und protected.
-
public (Standard): Mit
publicgekennzeichnete Eigenschaften und Methoden können von überall, sowohl innerhalb als auch außerhalb der Klasse, aufgerufen werden. -
private:
privatebezieht sich auf Eigenschaften und Methoden, die nur innerhalb der Klasse selbst aufgerufen werden können. Sie sind für externe Code-Teile unzugänglich. -
protected: Mit
protectedversehene Eigenschaften und Methoden können von der Klasse selbst und von abgeleiteten Klassen (in der Vererbung) aufgerufen werden, aber nicht von externem Code.
class Person {
private socialSecurityNumber: string;
constructor(ssn: string) {
this.socialSecurityNumber = ssn;
}
greet() {
console.log("Hello, I am a person with SSN: " + this.socialSecurityNumber);
}
}
const person = new Person("123-45-6789");
person.greet();In diesem Beispiel ist socialSecurityNumber eine private Eigenschaft, auf die nur innerhalb der Klasse Person zugegriffen werden kann. Die Methode greet können Sie aber von außerhalb aufrufen.
Vererbung
Vererbung ist ein grundlegendes Konzept in der objektorientierten Programmierung (OOP), das in TypeScript und vielen anderen Internet-Programmiersprachen eingesetzt wird. Es ermöglicht die Schaffung einer neuen Klasse auf der Grundlage einer bestehenden Basisklasse oder Superklasse. Die abgeleitete Klasse (Subklasse) erbt dabei die Eigenschaften und Methoden der Basisklasse und kann diese erweitern oder anpassen.
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Some generic sound");
}
}
class Dog extends Animal {
makeSound() {
console.log(this.name + " barks");
}
}
const myDog = new Dog("Buddy");
myDog.makeSound();Hier erbt die Klasse Dog von der Basisklasse Animal mithilfe des Schlüsselworts extends. Die abgeleitete Klasse Dog überschreibt die Methode makeSound, um ein spezifisches Verhalten hinzuzufügen, während sie die Eigenschaft name von Animal übernimmt.
Readonly
Das readonly-Schlüsselwort können Sie benutzen, um Eigenschaften von TypeScript Classes oder Objekten als schreibgeschützt zu deklarieren. Das bedeutet, dass nach der Initialisierung einer schreibgeschützten Eigenschaft ihr Wert nicht mehr geändert werden kann.
class Circle {
readonly pi: number = 3.14159;
radius: number;
constructor(radius: number) {
this.radius = radius;
}
getArea() {
return this.pi *this.radius* this.radius;
}
}
const myCircle = new Circle(5);
console.log(myCircle.getArea()); // Output: ≈ 78,54Die Eigenschaft pi ist in unserem Beispiel schreibgeschützt und wird im Konstruktor initialisiert. Nach der Initialisierung kann pi nicht mehr geändert werden. Wenn Sie versuchen, den Wert von pi nach der Initialisierung zu modifizieren, wird TypeScript einen Kompilierungsfehler generieren.
- DSGVO-konform & sicher gehostet in Deutschland
- Produktivität steigern – weniger Aufwand, mehr Output
- Direkt im Browser starten – ohne Installation