Programación reactiva en TypeScript: biblioteca RxJS

Programación reactiva en TypeScript con RxJS

La programación reactiva es un paradigma de desarrollo orientado a flujos de datos asíncronos y la propagación de cambios. En el ecosistema de TypeScript, la herramienta clave para implementar este paradigma es la biblioteca RxJS (Reactive Extensions for JavaScript). Proporciona un potente conjunto de herramientas para trabajar con eventos, solicitudes asíncronas y cualquier flujo de datos, haciendo que el código sea más predecible y fácil de mantener.

RxJS se basa en el patrón Observer y el concepto de Observable (flujo observable). Un Observable representa una fuente de datos que puede generar valores a lo largo del tiempo. Se puede suscribir a él mediante un Observer, que reacciona a tres tipos de eventos: next (nuevo valor), error (error) y complete (finalización del flujo).

Instalación y configuración de RxJS en TypeScript

Para empezar, instale RxJS a través de npm:

npm install rxjs

RxJS es totalmente compatible con TypeScript y tiene tipado incorporado. Aquí hay un ejemplo sencillo de creación de 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('Recibido:', value),  error: (err) => console.error('Error:', err),  complete: () => console.log('Flujo completado')});

Conceptos principales de RxJS

Para utilizar eficazmente la programación reactiva, es importante comprender los bloques de construcción clave de RxJS:

• Observable — fuente de datos que puede ser síncrona o asíncrona.
• Observer — objeto con métodos next, error, complete, que reacciona a los eventos del Observable.
• Subscription — objeto que representa la ejecución de un Observable. Se puede cancelar con el método unsubscribe().
• Operators — funciones puras para transformar, filtrar y combinar flujos de datos.
• Subject — tipo especial de Observable que también es un Observer. Permite multidifundir (distribuir) valores a múltiples suscriptores.

Operadores populares de RxJS

Los operadores son el corazón de RxJS. Permiten procesar flujos de datos de forma declarativa. Veamos algunos de uso frecuente:

• map — transforma cada valor del flujo según una función dada.
• filter — solo deja pasar los valores que cumplen una condición.
• mergeMap — proyecta cada valor en un Observable y combina los resultados en un solo flujo.
• debounceTime — retrasa la emisión de valores durante un tiempo especificado (útil para campos de búsqueda).
• catchError — captura errores en el flujo y devuelve un Observable de respaldo.

Ejemplo de uso de operadores para procesar 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 con coordenadas:', pos);});

Ejemplo práctico: formulario de búsqueda reactivo

Consideremos una tarea típica: implementar una búsqueda con autocompletado. Con RxJS esto se hace de forma elegante y sin callbacks anidados:

import { fromEvent } f