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:
- Wenn du Werte hast, die nach der Initialisierung nicht geändert werden sollen.
- Für Konfigurationsobjekte, die konstant bleiben sollten.
- Um versehentliche Änderungen in großen Codebasen zu verhindern.
- 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