Event-driven Architektur mit TypeScript: flexiblen Code mit Events schreiben

Event-driven Architektur mit TypeScript: Wenn Code einander „hört“

Stellen Sie sich vor, Sie schreiben eine komplexe Webanwendung: einen Messenger, einen Trading-Bot oder ein Server-Überwachungssystem. Irgendwann merken Sie: Funktionen einfach in einer Kette aufzurufen – das ist die Hölle. Ein Modul zieht das nächste mit, das dritte hängt am vierten, und bei einer Logikänderung fällt alles wie ein Kartenhaus zusammen.

Kommt Ihnen das bekannt vor? Dann brauchen Sie eine Event-driven Architektur mit TypeScript. Das ist nicht nur ein modischer Begriff, sondern eine echte Möglichkeit, Code flexibel, erweiterbar und verständlich zu machen. In diesem Artikel schauen wir uns an, wie ereignisorientierte Programmierung funktioniert, schreiben unseren eigenen Event-Bus in TypeScript und sehen, wo das wirklich weiterhilft.

Was ist Event-driven Architektur einfach erklärt

Event-driven Architektur (ereignisorientierte Architektur) ist ein Ansatz, bei dem Komponenten eines Systems über Ereignisse kommunizieren. Ein Modul erzeugt ein Ereignis (z. B. „Benutzer hat sich registriert“), und andere abonnieren es und reagieren darauf. Sie sind nicht direkt miteinander verbunden.

Klingt abstrakt? Nehmen wir ein Beispiel aus dem Leben. Stellen Sie sich ein Büro vor:

\n
• Traditioneller Ansatz: Der Chef geht persönlich zu jedem Mitarbeiter und sagt: „Erstelle einen Bericht.“
\n
• Event-driven: Der Chef ruft: „Ein Bericht wird benötigt!“ – und alle, die ihn erstellen können, machen sich selbst an die Arbeit.
\n

Im zweiten Fall muss der Chef nicht wissen, wer genau den Bericht erstellt. Er sendet einfach ein Ereignis. Und die Mitarbeiter können sich an- und abmelden, ohne die Logik des Chefs zu ändern. Das ist die Essenz der ereignisorientierten Programmierung.

Warum TypeScript ideal für die Event-Architektur ist

JavaScript ist an sich schon ereignisorientiert (denken Sie an addEventListener), aber in großen Projekten führt das Fehlen von Typen zu Chaos. TypeScript Events lösen dieses Problem: Sie wissen genau, welche Daten in einem Ereignis ankommen, und der Compiler fängt Fehler bereits in der Entwicklungsphase, nicht erst zur Laufzeit.

Außerdem unterstützt TypeScript Generics, Überladungen und strenge Typisierung von Callbacks – alles, was für die Erstellung eines zuverlässigen Event-Bus benötigt wird.

Einen Event Bus in TypeScript von Grund auf schreiben

Beginnen wir mit einem einfachen, aber funktionsfähigen Beispiel. Wir erstellen eine Klasse EventBus – die zentrale Ereignis-Bus, über die alle Module kommunizieren.

// event-bus.ts\ntype EventHandler<T = any> = (data: T) => void;\n\nclass EventBus {\n  private handlers: Map<string, EventHandler[]> = new Map();\n\n  // Abonnieren eines Ereignisses\n  on<T>(event: string, handler: EventHandler<T>): void {\n    if (!this.handlers.has(event)) {\n      this.handlers.set(event, []);\n    }\n    this.handlers.get(event)!.push(handler as EventHandler);\n  }\n\n  // Abbestellen eines Ereignisses\n  off(event: string, handler: EventHandler): void {\n    const handlers = this.handlers.get(event);\n    if (handlers) {\n      this.handlers.set(event, handlers.filter(h => h !== handler));\n    }\n  }\n\n  // Auslösen eines Ereignisses\n  emit<T>(event: string, data: T): void {\n    const handlers = this.handlers.get(event);\n    if (handlers) {\n      handlers.forEach(handler => handler(data));\n    }\n  }\n}\n\nexport const globalEventBus = new EventBus();

Damit haben wir eine einfache Event-driven Architektur mit TypeScript geschrieben. Jetzt kann jedes Modul globalEventBus importieren und entweder Ereignisse abhören oder sie auslösen.

Anwendungsbeispiel: Benachrichtigungen und Logging

Stellen wir uns vor, wir haben ein Authentifizierungsmodul und ein Benachrichtigungsmodul. Sie sollten nichts direkt voneinander wissen.

// auth-module.ts\nimport { globalEventBus } from './event-bus';\n\nexport function loginUser(email: string): void {\n  // ... Anmeldelogik\n  console.log(`Benut