TypeScript - Readonly-Eigenschaften: Ein Leitfaden für Anfänger

Hallo da, zukünftiger Codingsuperstar! Heute tauchen wir ein in die wundervolle Welt von TypeScript und erkunden eine seiner leistungsstarken Funktionen: Readonly-Eigenschaften. Mach dir keine Sorgen, wenn du neu im Programmieren bist; ich werde dein freundlicher Guide auf dieser aufregenden Reise sein. Also hol dir dein Lieblingsgetränk, mach dich bequem und lassen uns gemeinsam dieses TypeScript-Abenteuer beginnen!

Was sind Readonly-Eigenschaften?

Bevor wir ins Detail gehen, lassen wir uns erstmal klar machen, was Readonly-Eigenschaften sind. Stell dir vor, du hast ein wertvolles Familienerbstück - vielleicht eine wunderschöne antike Uhr. Du kannst sie ansehen, bewundern, aber du kannst sie nicht verändern. Genau das sind Readonly-Eigenschaften in TypeScript - Werte, die du sehen und verwenden kannst, aber nicht ändern kannst, sobald sie gesetzt sind.

Syntax

Lassen wir mit den Grundlagen beginnen. Wie deklarieren wir eine Readonly-Eigenschaft? Es ist so einfach wie das Hinzufügen des Keywords readonly vor dem Eigenschaftsnamen. Hier ist ein einfaches Beispiel:

class Heirloom {
readonly name: string;

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

const familyWatch = new Heirloom("Großvaters Uhr");
console.log(familyWatch.name); // Ausgabe: Großvaters Uhr
// familyWatch.name = "Neue Uhr"; // Fehler! Kann eine Readonly-Eigenschaft nicht ändern

In diesem Beispiel können wir die name-Eigenschaft im Konstruktor setzen, aber nicht später ändern. Es ist, als ob wir den Namen unseres Familienerbstücks für immer einfrieren!

Readonly-Eigenschaften in Schnittstellen

Schnittstellen in TypeScript sind wie.Blueprints für Objekte. Wir können Readonly-Eigenschaften auch in Schnittstellen verwenden. Sehen wir uns das an:

interface ReadonlyPerson {
readonly name: string;
readonly age: number;
}

const person: ReadonlyPerson = {
name: "Alice",
age: 30
};

console.log(person.name); // Ausgabe: Alice
// person.age = 31; // Fehler! Kann eine Readonly-Eigenschaft nicht ändern

Hier haben wir eine ReadonlyPerson-Schnittstelle erstellt, in der sowohl name als auch age readonly sind. Sobald wir ein Objekt basierend auf dieser Schnittstelle erstellen, können wir diese Eigenschaften nicht ändern. Es ist, als ob wir eine Ausweis-Karte erstellen - einmal gedruckt, kannst du nicht einfach das Alter wegschaben und einen neuen Wert reinschreiben!

Readonly-Eigenschaften in Klassen

Klassen sind wie.Blueprints für Objekte mit sowohl Daten als auch Verhalten. Sehen wir uns an, wie Readonly-Eigenschaften in Klassen funktionieren:

class Book {
readonly title: string;
readonly author: string;
private _pageCount: number;

constructor(title: string, author: string, pageCount: number) {
this.title = title;
this.author = author;
this._pageCount = pageCount;
}

get pageCount(): number {
return this._pageCount;
}

addPages(pages: number) {
this._pageCount += pages;
}
}

const myBook = new Book("TypeScript 101", "Jane Doe", 200);
console.log(myBook.title); // Ausgabe: TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // Ausgabe: 250
// myBook.title = "JavaScript 101"; // Fehler! Kann eine Readonly-Eigenschaft nicht ändern

In diesem Beispiel sind title und author readonly, aber wir können pageCount über eine Methode trotzdem ändern. Es ist, als ob ein Buch - einmal gedruckt - du kannst den Titel oder den Autor nicht ändern, aber du kannst Seiten hinzufügen (vielleicht in einer überarbeiteten Ausgabe).

Readonly-Eigenschaften mit Typen Aliassen

Typen Aliassen sind wie Spitznamen für Typen. Wir können Readonly-Eigenschaften auch mit ihnen verwenden:

type ReadonlyPoint = {
readonly x: number;
readonly y: number;
};

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // Ausgabe: 10 20
// point.x = 30; // Fehler! Kann eine Readonly-Eigenschaft nicht ändern

Hier haben wir einen ReadonlyPoint-Typ erstellt, bei dem sowohl x als auch y readonly sind. Es ist, als ob wir Koordinaten auf einer Karte setzen - einmal gesetzt, kannst du den Punkt nicht mehr bewegen!

Const vs. Readonly-Eigenschaften

Du fragst dich vielleicht, "Was ist der Unterschied zwischen const und readonly?" Tolle Frage! Lassen wir es auseinanderdividieren:

const PI = 3.14159;
// PI = 3.14; // Fehler! Kann eine const-Variablen nicht neu zuweisen

class Circle {
readonly radius: number;

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

const circle = new Circle(5);
// circle.radius = 10; // Fehler! Kann eine Readonly-Eigenschaft nicht ändern

const wird für Variablen verwendet, die nicht neu zugewiesen werden können. readonly wird für Eigenschaften verwendet, die nach der Initialisierung nicht geändert werden können. Denke daran, dass const ein Versprechen ist, den Behälter nicht zu ändern, während readonly ein Versprechen ist, den Inhalt nicht zu ändern.

Wann sollte man Readonly-Eigenschaften verwenden?

Also, wann solltest du Readonly-Eigenschaften verwenden? Hier sind einige häufige Szenarien:

1. Wenn du Werte hast, die nach der Initialisierung nicht geändert werden sollen.
2. Für Konfigurationsobjekte, die konstant bleiben sollten.
3. Um versehentliche Änderungen in großen Codebasen zu verhindern.
4. Wenn man mit unveränderlichen Datenstrukturen arbeitet.

Hier ist eine Tabelle, die die Methoden zusammenfasst, die wir besprochen haben:

Methode	Beschreibung	Beispiel
Mit Schnittstellen	Definiere Readonly-Eigenschaften in Objekt-Blueprints	interface ReadonlyPerson { readonly name: string; }
In Klassen	Erstelle Klassen-Eigenschaften, die nach der Initialisierung nicht geändert werden können	class Book { readonly title: string; }
Mit Typen Aliassen	Definiere Readonly-Eigenschaften in benutzerdefinierten Typen	type ReadonlyPoint = { readonly x: number; readonly y: number; }
Const vs Readonly	Verwende const für Variablen, readonly für Eigenschaften	const PI = 3.14; class Circle { readonly radius: number; }

Denke daran, Readonly-Eigenschaften zu verwenden, ist wie das Setzen von Regeln für deine zukünftige selbst und andere Entwickler. Es hilft Fehler zu vermeiden und macht deinen Code vorhersehbarer und wartbarer.

Und da hast du es, meine lieben Schüler! Wir haben die Welt der Readonly-Eigenschaften in TypeScript erkundet. Ich hoffe, dieser Leitfaden hat dir den Weg erleuchtet. Erinnere dich daran, Übung macht den Meister, also fürchte dich nicht, diese Konzepte in deinen eigenen Projekten auszuprobieren. Frohes Coden und mögen deine Readonly-Eigenschaften immer treu zu ihren Werten bleiben!

Credits: Image by storyset