Utiliser RxJS avec TypeScript

1. Exécution asynchrone TypeScript
2. Programmation réactive avec RxJS
3. Configurer RxJS avec TypeScript
4. Consommer RxJS à l’intérieur de TypeScript

TypeScript est un sur-ensemble du langage JavaScript qui prend en charge le typage statique et la vérification de type tout en conservant toutes les autres fonctionnalités offertes par JavaScript. L’une des fonctionnalités avancées et largement utilisées est l’exécution de programme asynchrone.

Les applications modernes sont hautement interactives et orientées vers le consommateur. Par conséquent, la plupart des informations sont disponibles de manière asynchrone.

Plusieurs techniques sont disponibles dans TypeScript pour gérer la logique asynchrone comme les rappels, les promesses et les événements.

Exécution asynchrone TypeScript

Les fonctions de rappel étaient la technique la plus ancienne utilisée pour gérer le code asynchrone. Il y avait quelques inconvénients avec les rappels, tels que l’absence de moyen approprié de détecter les erreurs, l’introduction de l’enfer des rappels et les problèmes de maintenance.

Par conséquent, le concept de la promesse a été introduit. Une promesse imite une promesse du monde réel où une opération asynchrone génère un résultat éventuel qui peut être un succès ou un échec.

Dans TypeScript, un objet de promesse accepte une fonction avec deux paramètres nommés résoudre et rejeter pour tenir ou échouer la promesse. C’est un grand pas en avant dans la programmation asynchrone, mais les problèmes de rappel sont toujours là.

La technique éditeur-abonné est un autre moyen courant de gérer les événements asynchrones. Chaque fois que l’état d’un objet change, il lève des notifications à ses abonnés ou observateurs.

C’est un moyen plus avancé de gérer les opérations asynchrones que les rappels, mais il présente encore certains inconvénients, tels que l’impossibilité de s’abonner à une série d’événements pour les gérer de manière séquentielle, les événements peuvent perdre pour toujours, etc.

Programmation réactive avec RxJS

Comme mentionné précédemment, le traitement des événements revient à trouver le moyen de sortir d’un labyrinthe. Par conséquent, la mise en œuvre de l’application pilotée par les événements était lourde.

Par conséquent, la méthodologie de programmation réactive a été introduite. Il a simplifié l’exécution de code asynchrone et la mise en œuvre de programmes événementiels dans TypeScript.

Il s’appuie sur le concept d’ Observable. De plus, les modèles d’observateur et d’itérateur ont été utilisés.

Configurer RxJS avec TypeScript

Tout d’abord, nous devons créer un projet Node.js. Vous pouvez installer Node.js depuis le site officiel.

Lorsque vous installez Node.js, il configure automatiquement le NPM pour vous. Générons le fichier package.json comme indiqué ci-dessous.

npm init

Il vous demandera d’entrer des détails supplémentaires pour votre projet Node et de vous en tenir à ceux par défaut pour l’instant.

La bibliothèque RxJS est disponible sous forme de package NPM. Par conséquent, nous pouvons l’installer avec npm comme indiqué ci-dessous.

npm install rxjs
OR
npm i rxjs

Cela créerait un dossier node_modules séparé pour conserver toutes les dépendances tierces, y compris le module RxJS.

Ensuite, nous devons générer le fichier de configuration TypeScript, qui contient certaines configurations de base pour le compilateur TypeScript.

tsc --init

Cela générerait un nouveau fichier JSON appelé tsconfig.json. Ajoutons-y les entrées suivantes.

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

Ici, le tableau files contient tous les fichiers que nous devons compiler. Dans cet exemple, nous allons écrire toute la logique TypeScript dans le fichier rxjstest.ts.

Consommer RxJS à l’intérieur de TypeScript

Comme nous avons déjà installé la bibliothèque RxJS, nous pouvons importer les types et méthodes nécessaires à partir du module RxJS. Dans cet exemple, nous allons importer le type Observable et la méthode of de la bibliothèque RxJS.

import { of, Observable } from "rxjs";

Créons un nouvel objet de type Observable qui publie les valeurs de température d’une ville.

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

Le weatherPublisher est un objet de type Observable qui génère quatre valeurs numériques à l’aide de la méthode RxJS of.

Ensuite, nous pouvons nous abonner à l’observable weatherPublisher. Il émet quatre températures, comme indiqué ci-dessous.

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

Puisque nous en avons fini avec le code, compilons le fichier rxjstest.ts en utilisant la commande suivante.

tsc -p ./tsconfig.json

Cela générerait le fichier JavaScript correspondant. Ensuite, nous pouvons exécuter le fichier JavaScript comme indiqué ci-dessous.

node rxjstest.js

Production:

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

La bibliothèque RxJS fonctionne bien avec la configuration TypeScript.