Reaktive Programmierung in TypeScript: Die Bibliothek RxJS

Reaktive Programmierung in TypeScript mit RxJS

Reaktive Programmierung ist ein Entwicklungsparadigma, das sich auf asynchrone Datenströme und die Weitergabe von Änderungen konzentriert. Im TypeScript-Ökosystem ist die Bibliothek RxJS (Reactive Extensions for JavaScript) das wichtigste Werkzeug zur Umsetzung dieses Paradigmas. Sie bietet einen leistungsstarken Satz von Werkzeugen für die Arbeit mit Ereignissen, asynchronen Anfragen und beliebigen Datenströmen und macht den Code vorhersagbarer und leichter wartbar.

RxJS basiert auf dem Observer-Entwurfsmuster und dem Konzept des Observable (beobachtbarer Strom). Ein Observable stellt eine Datenquelle dar, die im Laufe der Zeit Werte erzeugen kann. Man kann es mit einem Observer abonnieren, der auf drei Arten von Ereignissen reagiert: next (neuer Wert), error (Fehler) und complete (Abschluss des Stroms).

Installation und Einrichtung von RxJS in TypeScript

Installieren Sie RxJS zunächst über npm:

npm install rxjs

RxJS ist vollständig kompatibel mit TypeScript und verfügt über eine integrierte Typisierung. Hier ist ein einfaches Beispiel zur Erstellung eines Observable:

import { Observable } from 'rxjs';

const observable = new Observable<number>(subscriber => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  setTimeout(() => {    subscriber.next(4);    subscriber.complete();  }, 1000);});

observable.subscribe({  next: (value) => console.log('Erhalten:', value),  error: (err) => console.error('Fehler:', err),  complete: () => console.log('Strom abgeschlossen')});

Grundlegende Konzepte von RxJS

Um reaktive Programmierung effektiv zu nutzen, ist es wichtig, die grundlegenden Bausteine von RxJS zu verstehen:

• Observable — eine Datenquelle, die synchron oder asynchron sein kann.
• Observer — ein Objekt mit den Methoden next, error, complete, das auf Ereignisse des Observable reagiert.
• Subscription — ein Objekt, das die Ausführung eines Observable darstellt. Es kann mit der Methode unsubscribe() abgebrochen werden.
• Operators — reine Funktionen zum Transformieren, Filtern und Kombinieren von Datenströmen.
• Subject — ein spezieller Typ von Observable, der gleichzeitig ein Observer ist. Er ermöglicht das Multicasting (Verteilen) von Werten an mehrere Abonnenten.

Beliebte RxJS-Operatoren

Operatoren sind das Herz von RxJS. Sie ermöglichen die deklarative Verarbeitung von Datenströmen. Betrachten wir einige häufig verwendete:

• map — transformiert jeden Wert des Stroms gemäß einer gegebenen Funktion.
• filter — lässt nur die Werte passieren, die eine Bedingung erfüllen.
• mergeMap — projiziert jeden Wert auf ein Observable und fasst die Ergebnisse zu einem Strom zusammen.
• debounceTime — verzögert die Ausgabe von Werten um eine angegebene Zeit (nützlich für Suchfelder).
• catchError — fängt Fehler im Strom ab und gibt ein Ersatz-Observable zurück.

Beispiel für die Verwendung von Operatoren zur Verarbeitung von Klicks:

import { fromEvent } from 'rxjs';import { map, filter, debounceTime } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');

clicks.pipe(  debounceTime(300),  map((event: MouseEvent) => ({    x: event.clientX,    y: event.clientY  })),  filter(pos => pos.x > 100)).subscribe(pos => {  console.log('Klick mit Koordinaten:', pos);});

Praktisches Beispiel: Reaktives Suchformular

Betrachten wir eine typische Aufgabe – die Implementierung einer Suche mit Autovervollständigung. Mit RxJS wird dies elegant und ohne verschachtelte Callbacks erledigt:

import { fromEvent } f