Programmation réactive en TypeScript : la bibliothèque RxJS

Programmation réactive en TypeScript avec RxJS

La programmation réactive est un paradigme de développement axé sur les flux de données asynchrones et la propagation des changements. Dans l'écosystème TypeScript, l'outil clé pour implémenter ce paradigme est la bibliothèque RxJS (Reactive Extensions for JavaScript). Elle fournit un ensemble puissant d'outils pour travailler avec les événements, les requêtes asynchrones et tout flux de données, rendant le code plus prévisible et facile à maintenir.

RxJS est basée sur le modèle Observer et le concept d'Observable (flux observable). Un Observable représente une source de données qui peut générer des valeurs au fil du temps. On peut s'y abonner à l'aide d'un Observer, qui réagit à trois types d'événements : next (nouvelle valeur), error (erreur) et complete (fin du flux).

Installation et configuration de RxJS dans TypeScript

Pour commencer, installez RxJS via npm :

npm install rxjs

RxJS est entièrement compatible avec TypeScript et dispose d'un typage intégré. Voici un exemple simple de création d'un 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('Reçu :', value),  error: (err) => console.error('Erreur :', err),  complete: () => console.log('Flux terminé')});

Concepts fondamentaux de RxJS

Pour utiliser efficacement la programmation réactive, il est important de comprendre les blocs de construction clés de RxJS :

• Observable — source de données, qui peut être synchrone ou asynchrone.
• Observer — objet avec les méthodes next, error, complete, qui réagit aux événements de l'Observable.
• Subscription — objet représentant l'exécution d'un Observable. Il peut être annulé avec la méthode unsubscribe().
• Operators — fonctions pures pour transformer, filtrer et combiner des flux de données.
• Subject — type spécial d'Observable qui est également un Observer. Il permet de multicast (distribuer) des valeurs à plusieurs abonnés.

Opérateurs RxJS populaires

Les opérateurs sont le cœur de RxJS. Ils permettent de traiter les flux de données de manière déclarative. Examinons quelques-uns des plus utilisés :

• map — transforme chaque valeur du flux selon une fonction donnée.
• filter — ne laisse passer que les valeurs qui satisfont une condition.
• mergeMap — projette chaque valeur sur un Observable et fusionne les résultats en un seul flux.
• debounceTime — retarde l'émission des valeurs d'un temps spécifié (utile pour les champs de recherche).
• catchError — intercepte les erreurs dans le flux et renvoie un Observable de secours.

Exemple d'utilisation d'opérateurs pour traiter des clics :

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('Clic aux coordonnées :', pos);});

Exemple pratique : formulaire de recherche réactif

Considérons une tâche typique — l'implémentation d'une recherche avec autocomplétion. Avec RxJS, cela se fait élégamment et sans callbacks imbriqués :

import { fromEvent } f