Konstanten in TypeScript: Wie man sie deklariert und in Klassen verwendet

Konstanten in TypeScript-Klassen: Vom Anfänger zum Profi

Haben Sie jemals in TypeScript geschrieben und plötzlich erkannt: "Diesen magischen String 'ADMIN' verwende ich an zehn Stellen, und wenn ich mich vertippe, schweigt der Compiler"? Ein bekanntes Problem. Oder noch schlimmer: Jemand aus dem Team ändert den Wert einer Konstante direkt zur Laufzeit, und Sie verbringen eine Stunde mit Debugging, um zu verstehen, warum alles kaputt ist.

Willkommen in der Welt der Klassenkonstanten in TypeScript. Das ist nicht nur syntaktischer Zucker – es ist das Fundament einer sauberen, vorhersagbaren und sicheren Architektur. In diesem Artikel behandeln wir alle Möglichkeiten, Konstanten in TypeScript-Klassen zu deklarieren: vom einfachen readonly bis zu fortgeschrittenen Techniken mit as const und Generics. Los geht's!

Warum sind Konstanten in Klassen wichtig?

Stellen Sie sich vor, Sie entwickeln eine Anwendung für einen Online-Shop. Sie haben eine Klasse Order mit Statuswerten: "pending", "shipped", "delivered". Wenn Sie diese Strings über den gesamten Code verteilen, wird früher oder später jemand "PENDING" in Großbuchstaben schreiben – und der Fehler ist vorprogrammiert. Klassenkonstanten in TypeScript lösen dieses Problem ein für alle Mal.

\n
• Typsicherheit: Der Compiler lässt nicht zu, dass "pendingg" dort übergeben wird, wo "pending" erforderlich ist.
\n
• Lesbarkeit: OrderStatus.Pending ist verständlicher als ein einfacher String.
\n
• Wartbarkeit: Eine Änderung des Werts an einer Stelle ändert ihn überall.
\n

Methode Nr. 1: readonly – Basis, aber mit Nuancen

Der einfachste Weg ist die Verwendung des Modifikators readonly. Er verbietet die Änderung eines Feldes nach der Initialisierung.

class AppConfig {\n    readonly API_URL: string = 'https://api.example.com';\n    readonly MAX_RETRIES: number = 3;\n}\n\nconst config = new AppConfig();\nconsole.log(config.API_URL); // 'https://api.example.com'\n// config.API_URL = 'new-url'; // Fehler! Zuweisung zu 'API_URL' nicht möglich, da es sich um eine schreibgeschützte Eigenschaft handelt.

Es gibt jedoch einen Haken: readonly funktioniert nur auf TypeScript-Ebene. Im kompilierten JavaScript können diese Felder immer noch geändert werden. Verwenden Sie für vollständigen Schutz Object.freeze oder # (private Felder).

Methode Nr. 2: static readonly – der König der Konstanten

Wenn die Konstante nicht an eine bestimmte Instanz der Klasse gebunden ist (was in 99 % der Fälle vorkommt), verwenden Sie static readonly. Dies ist das klassische class constant typescript-Muster.

class MathConstants {\n    static readonly PI: number = 3.14159;\n    static readonly E: number = 2.71828;\n    static readonly GOLDEN_RATIO: number = 1.61803;\n}\n\n// Zugriff ohne Erstellung einer Instanz\nconsole.log(MathConstants.PI); // 3.14159\n// MathConstants.PI = 3.14; // Fehler!

Dieser Ansatz ist ideal für Konfigurationen, mathematische Konstanten, Statuswerte und alle Werte, die sich nicht ändern sollen.

Methode Nr. 3: enum – wenn es viele Konstanten gibt

Wenn Sie eine Gruppe zusammengehöriger Konstanten haben (z. B. Bestellstatus), ist enum Ihr bester Freund. Es erstellt eine benannte Menge von Werten.

enum OrderStatus {\n    Pending = 'pending',\n    Shipped = 'shipped',\n    Delivered = 'delivered',\n    Cancelled = 'cancelled'\n}\n\nclass Order {\n    constructor(public status: OrderStatus) {}\n}\n\nconst order = new Order(OrderStatus.Pending);\nconsole.log(order.status); // 'pending'\n\n// order.status = 'pendingg'; // Fehler! Der Typ '"pendingg"' kann nicht dem Typ 'OrderStatus' zugewiesen werden.

Tipp: Wenn Sie String-enums verwenden (wie im Beispiel), liefern sie lesbare Werte zur Laufzeit. Numerische enums sind schneller, aber schwieriger zu debuggen.

Methode Nr. 4: as const – für maximale Strenge

Manchmal möchten Sie, dass ein Objekt oder ein Array zu einer Konstante wird.