Reaktive Programmierung in TypeScript: Bibliothek RxJS

Reaktive Programmierung in TypeScript: vollständiger Leitfaden zu RxJS

Reaktive Programmierung ist ein Entwicklungsparadigma, das auf asynchrone Datenströme und die Verbreitung von Änderungen ausgerichtet ist. Im TypeScript-Ökosystem ist die Bibliothek RxJS (Reactive Extensions for JavaScript) das leistungsstärkste Werkzeug zur Umsetzung dieses Paradigmas. RxJS ermöglicht es, mit Ereignissen, asynchronen Anfragen und Anwendungszuständen als Datenfolgen zu arbeiten, die mit deklarativen Operatoren transformiert, kombiniert und gefiltert werden können.

Grundlegende Konzepte von RxJS

Die Grundlage von RxJS bilden drei Schlüsselentitäten:

\n
• Observable — eine Datenquelle, die im Laufe der Zeit Werte erzeugen kann. Analog zu einem Array, aber die Elemente erscheinen asynchron.
\n
• Observer — ein Datenkonsument, der auf drei Arten von Ereignissen reagiert: next (neuer Wert), error (Fehler) und complete (Abschluss des Streams).
\n
• Subscription — ein Objekt, das die Ausführung eines Observable darstellt. Ermöglicht das Kündigen des Abonnements und das Freigeben von Ressourcen.
\n

import { Observable } from 'rxjs';\n\nconst observable = new Observable<number>(subscriber => {\n  subscriber.next(1);\n  subscriber.next(2);\n  subscriber.next(3);\n  setTimeout(() => {\n    subscriber.next(4);\n    subscriber.complete();\n  }, 1000);\n});\n\nconst subscription = observable.subscribe({\n  next: (value) => console.log(`Erhalten: ${value}`),\n  error: (err) => console.error(`Fehler: ${err}`),\n  complete: () => console.log('Stream abgeschlossen')\n});\n\n// Abonnement nach 500 ms kündigen\nsetTimeout(() => subscription.unsubscribe(), 500);

RxJS-Operatoren: Grundlage reaktiver Transformationen

Operatoren sind reine Funktionen, die ein Observable entgegennehmen und ein neues Observable zurückgeben, ohne das ursprüngliche zu verändern. Sie werden in mehrere Kategorien unterteilt:

\n
• Erstellende: of, from, interval, fromEvent
\n
• Transformierende: map, pluck, scan, buffer
\n
• Filternde: filter, take, skip, distinctUntilChanged
\n
• Kombinierende: merge, concat, combineLatest, zip
\n
• Fehlerbehandlung: catchError, retry, retryWhen
\n

import { fromEvent, interval } from 'rxjs';\nimport { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';\n\n// Beispiel: Reaktive Suche mit Debounce\nconst searchInput = document.getElementById('search') as HTMLInputElement;\nconst input$ = fromEvent(searchInput, 'input').pipe(\n  map(event => (event.target as HTMLInputElement).value),\n  filter(text => text.length >= 3),\n  debounceTime(300),\n  distinctUntilChanged()\n);\n\ninput$.subscribe(searchTerm => {\n  console.log(`Suche: ${searchTerm}`);\n  // HTTP-Anfrage ausführen\n});

Subject: heiße und kalte Streams

Subject ist ein spezieller Observable-Typ, der gleichzeitig Beobachter und Beobachtbarer ist. Er ermöglicht das Multicasting (Verteilen) desselben Werts an mehrere Abonnenten. Die wichtigsten Varianten:

\n
• Subject — basis, überträgt nur neue Werte
\n
• BehaviorSubject — speichert den letzten Wert und gibt ihn an neue Abonnenten aus
\n
• ReplaySubject — puffert die N letzten Werte
\n
• AsyncSubject — gibt nur den letzten Wert nach Abschluss des Streams aus
\n

import { BehaviorSubject } from 'rxjs';\n\n// Zustandsverwaltung der Anwendung