TypeScript - Accessoren

Hallo da, angehende Programmierer! Heute tauchen wir ein in die faszinierende Welt der TypeScript Accessoren. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie Schritt für Schritt durch dieses Thema führen, genau wie ich es bei unzähligen Schülern in den letzten Jahren getan habe. Also, holen Sie sich ein Getränk Ihrer Wahl und lassen Sie uns loslegen!

Was sind Accessoren?

Bevor wir uns den spezifischen TypeScript Accessoren zuwenden, lassen Sie uns erst einmal verstehen, was Accessoren im Allgemeinen sind. Stellen Sie sich eine Schatzkiste (das ist unser Objekt) vor und Sie möchten kontrollieren, wie Menschen mit den Schätzen darin interagieren (die Eigenschaften des Objekts). Accessoren sind wie die magischen Schlüssel, die es Ihnen ermöglichen, diese Schätze auf kontrollierte Weise zu erhalten oder zu setzen.

In TypeScript haben wir zwei Arten von Accessoren:

1. Getter: Diese helfen uns, den Wert einer Eigenschaft abzurufen.
2. Setter: Diese erlauben uns, den Wert einer Eigenschaft zu setzen.

Nun, lassen Sie uns diese genauer untersuchen.

Getter in TypeScript

Was ist ein Getter?

Ein Getter ist eine spezielle Art von Methode, die es Ihnen ermöglicht, auf eine Eigenschaft eines Objekts zuzugreifen. Es ist, als hätten Sie einen persönlichen Assistenten, der Informationen für Sie holt.

Wie definiert man einen Getter

Sehen wir uns ein einfaches Beispiel an:

class Person {
private _name: string;

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

get name(): string {
console.log("Name abrufen");
return this._name;
}
}

let person = new Person("Alice");
console.log(person.name); // Ausgabe: Name abrufen\n Alice

In diesem Beispiel:

• Wir haben eine Person-Klasse mit einer privaten Eigenschaft _name.
• Wir definieren einen Getter namens name mit dem get-Schlüsselwort.
• Wenn wir person.name aufrufen, wird unsere Getter-Methode aufgerufen.

Warum Getter verwenden?

1. Berechnete Eigenschaften: Getter können berechnete Werte zurückgeben.

class Circle {
private _radius: number;

constructor(radius: number) {
this._radius = radius;
}

get area(): number {
return Math.PI * this._radius ** 2;
}
}

let circle = new Circle(5);
console.log(circle.area); // Ausgabe: 78.53981633974483

2. Lazy Loading: Getter können der Leistung durch das Laden von Daten nur bei Bedarf helfen.

class DataFetcher {
private _data: string | null = null;

get data(): string {
if (this._data === null) {
console.log("Daten abrufen...");
this._data = "Ein teurer Datensatz";
}
return this._data;
}
}

let fetcher = new DataFetcher();
console.log(fetcher.data); // Ausgabe: Daten abrufen...\n Ein teurer Datensatz
console.log(fetcher.data); // Ausgabe: Ein teurer Datensatz (kein Abruf diesmal)

Setter in TypeScript

Was ist ein Setter?

Ein Setter ist wie das Gegenstück zu einem Getter. Es ist eine Methode, die den Wert einer Eigenschaft setzt, oft mit zusätzlicher Logik.

Wie definiert man einen Setter

Hier ist ein grundlegendes Beispiel:

class Temperature {
private _celsius: number = 0;

set celsius(value: number) {
if (value < -273.15) {
throw new Error("Temperaturen unter dem absoluten Nullpunkt sind nicht möglich");
}
this._celsius = value;
}

get celsius(): number {
return this._celsius;
}
}

let temp = new Temperature();
temp.celsius = 25; // Das ruft den Setter auf
console.log(temp.celsius); // Ausgabe: 25

// temp.celsius = -300; // Das würde einen Fehler werfen

In diesem Beispiel:

• Wir haben eine Temperature-Klasse mit einer privaten _celsius-Eigenschaft.
• Wir definieren einen Setter für celsius, der den Wert überprüft, bevor er ihn setzt.

Warum Setter verwenden?

1. Datenvalidierung: Setter können sicherstellen, dass nur gültige Werte zugewiesen werden.

2. Nebenwirkungen: Setter können andere Aktionen auslösen, wenn eine Eigenschaft geändert wird.

class User {
private _name: string = "";
private _lastUpdated: Date = new Date();

set name(value: string) {
this._name = value;
this._lastUpdated = new Date();
}

get name(): string {
return this._name;
}

get lastUpdated(): Date {
return this._lastUpdated;
}
}

let user = new User();
user.name = "Bob";
console.log(user.name); // Ausgabe: Bob
console.log(user.lastUpdated); // Ausgabe: Aktuelles Datum und Uhrzeit

Accessor Methoden Tabelle

Hier ist eine Zusammenfassung der Accessor Methoden, die wir besprochen haben:

Accessor Typ	Schlüsselwort	Zweck	Beispiel
Getter	get	Einen Eigenschaftswert abrufen	get name(): string { return this._name; }
Setter	set	Einen Eigenschaftswert setzen	set name(value: string) { this._name = value; }

Schlussfolgerung

Accessoren in TypeScript bieten eine leistungsstarke Möglichkeit, den Zugriff und die Modifikation von Objekteigenschaften zu steuern. Sie ermöglichen es Ihnen, Logik, Validierung und berechnete Eigenschaften zu Ihren Klassen hinzuzufügen, was Ihren Code robuster und wartbarer macht.

Erinnern Sie sich daran, dass das Beherrschen von Accessoren wie das Lernen jeder neuen Fähigkeit Übung erfordert. Lassen Sie sich nicht entmutigen, wenn es nicht sofort klappt – weiter codieren, weiter experimentieren, und bald werden Sie Getter und Setter wie ein Profi verwenden!

Wie ich meinen Schülern immer sage, Programmieren ist wie das Lernen einer neuen Sprache. Am Anfang mag es verwirrend erscheinen, aber mit Geduld und Übung werden Sie bald fließend TypeScript sprechen. Viel Spaß beim Coden und vergessen Sie nicht, dabei Spaß zu haben!

Credits: Image by storyset