RxJS mit TypeScript verwenden

1. Asynchrone TypeScript-Ausführung
2. Reaktive Programmierung mit RxJS
3. Richten Sie RxJS mit TypeScript ein
4. Verwenden Sie RxJS in TypeScript

TypeScript ist eine Obermenge der JavaScript-Sprache, die statische Typisierung und Typüberprüfung unterstützt und gleichzeitig alle anderen Funktionen von JavaScript beibehält. Eine der fortschrittlichen und weit verbreiteten Funktionen ist die asynchrone Programmausführung.

Moderne Anwendungen sind hochgradig interaktiv und verbraucherorientiert. Daher sind die meisten Informationen asynchron verfügbar.

In TypeScript sind mehrere Techniken verfügbar, um asynchrone Logik wie Callbacks, Promises und Events zu verarbeiten.

Asynchrone TypeScript-Ausführung

Die Callback-Funktionen waren die älteste Technik zur Verarbeitung von asynchronem Code. Es gab einige Nachteile bei Rückrufen, wie z. B. das Fehlen einer geeigneten Methode zum Abfangen von Fehlern, das Einführen der Rückrufhölle und Wartungsprobleme.

Daher wurde der Begriff des Versprechens eingeführt. Ein Promise ahmt ein echtes Promise nach, bei dem ein asynchroner Vorgang ein Endergebnis generiert, das ein Erfolg oder Misserfolg sein kann.

In TypeScript akzeptiert ein Promise-Objekt eine Funktion mit zwei Parametern namens resolve und reject, um das Promise zu halten oder abzulehnen. Dies ist ein großer Schritt in der asynchronen Programmierung, aber die Callback-Höllenprobleme sind immer noch da.

Die Publisher-Subscriber-Technik ist eine weitere beliebte Methode zur Behandlung asynchroner Ereignisse. Immer wenn sich der Zustand eines Objekts ändert, werden seine Abonnenten oder Beobachter benachrichtigt.

Es ist eine fortgeschrittenere Art, asynchrone Operationen zu handhaben als Callbacks, aber es hat immer noch einige Nachteile, wie z. B. die Tatsache, dass man nicht eine Reihe von Ereignissen abonnieren kann, um sie nacheinander zu behandeln, dass Ereignisse für immer verloren gehen können usw.

Reaktive Programmierung mit RxJS

Wie bereits erwähnt, ist die Ereignisverarbeitung wie das Finden des Weges aus einem Labyrinth. Daher war die ereignisgesteuerte Anwendungsimplementierung umständlich.

Daher wurde die Methode der reaktiven Programmierung eingeführt. Es vereinfachte die Ausführung von asynchronem Code und die Implementierung von ereignisgesteuerten Programmen in TypeScript.

Es stützt sich auf das Konzept von Observable. Weiterhin wurden die Observer- und Iterator-Muster verwendet.

Richten Sie RxJS mit TypeScript ein

Zuerst müssen wir ein Node.js-Projekt erstellen. Sie können Node.js von der offiziellen Seite installieren.

Wenn Sie Node.js installieren, richtet es automatisch den NPM für Sie ein. Lassen Sie uns die Datei package.json generieren, wie im Folgenden gezeigt.

npm init

Sie werden aufgefordert, zusätzliche Details für Ihr Node-Projekt einzugeben und sich vorerst an die Standardeinstellungen zu halten.

Die RxJS-Bibliothek ist als NPM-Paket verfügbar. Daher können wir es wie im Folgenden gezeigt mit npm installieren.

npm install rxjs
OR
npm i rxjs

Es würde einen separaten node_modules-Ordner erstellen, um alle Abhängigkeiten von Drittanbietern, einschließlich des RxJS-Moduls, beizubehalten.

Als nächstes sollten wir die TypeScript-Konfigurationsdatei generieren, die einige grundlegende Konfigurationen für den TypeScript-Compiler enthält.

tsc --init

Dies würde eine neue JSON-Datei namens tsconfig.json erzeugen. Lassen Sie uns die folgenden Einträge hinzufügen.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "files": [
    "rxjstest.ts",
  ]
}

Hier enthält das files-Array alle Dateien, die wir kompilieren müssen. In diesem Beispiel schreiben wir die gesamte TypeScript-Logik in die Datei rxjstest.ts.

Verwenden Sie RxJS in TypeScript

Da wir die Bibliothek RxJS bereits installiert haben, können wir die notwendigen Typen und Methoden aus dem Modul rxjs importieren. In diesem Beispiel importieren wir den Typ Observable und die Methode of aus der Bibliothek rxjs.

import { of, Observable } from "rxjs";

Lassen Sie uns ein neues Objekt vom Typ Observable erstellen, das die Temperaturwerte einer Stadt veröffentlicht.

const weatherPublisher : Observable<number> = of(25, 12,45,18);

Der weatherPublisher ist ein Objekt vom Typ Observable, das mit der Methode RxJS of vier Zahlenwerte generiert.

Als nächstes können wir das Observable weatherPublisher abonnieren. Es gibt vier Temperaturen aus, wie im Folgenden gezeigt.

weatherPublisher.subscribe((value: number) => {
  console.log(`Temperature: ${value}`)
})

Da wir mit dem Code fertig sind, kompilieren wir die Datei rxjstest.ts mit dem folgenden Befehl.

tsc -p ./tsconfig.json

Es würde die entsprechende JavaScript-Datei generieren. Dann können wir die JavaScript-Datei wie im Folgenden gezeigt ausführen.

node rxjstest.js

Ausgabe:

Temperature: 25
Temperature: 12
Temperature: 45
Temperature: 18

Die RxJS-Bibliothek funktioniert gut mit dem TypeScript-Setup.