Programação Reativa em TypeScript: biblioteca RxJS

Programação Reativa em TypeScript com RxJS

Programação reativa é um paradigma de desenvolvimento focado em fluxos de dados assíncronos e propagação de mudanças. No ecossistema TypeScript, a principal ferramenta para implementar esse paradigma é a biblioteca RxJS (Reactive Extensions for JavaScript). Ela fornece um conjunto poderoso de ferramentas para trabalhar com eventos, requisições assíncronas e quaisquer fluxos de dados, tornando o código mais previsível e fácil de manter.

O RxJS é baseado no padrão Observer e no conceito de Observable (fluxo observável). Um Observable representa uma fonte de dados que pode gerar valores ao longo do tempo. É possível se inscrever nele usando um Observer, que reage a três tipos de eventos: next (novo valor), error (erro) e complete (término do fluxo).

Instalação e configuração do RxJS no TypeScript

Para começar, instale o RxJS via npm:

npm install rxjs

O RxJS é totalmente compatível com TypeScript e possui tipagem embutida. Aqui está um exemplo simples de criação de um 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('Recebido:', value),  error: (err) => console.error('Erro:', err),  complete: () => console.log('Fluxo concluído')});

Conceitos principais do RxJS

Para usar a programação reativa de forma eficaz, é importante entender os blocos de construção fundamentais do RxJS:

• Observable — uma fonte de dados que pode ser síncrona ou assíncrona.
• Observer — um objeto com métodos next, error, complete, que reage aos eventos do Observable.
• Subscription — um objeto que representa a execução de um Observable. Pode ser cancelado usando o método unsubscribe().
• Operators — funções puras para transformar, filtrar e combinar fluxos de dados.
• Subject — um tipo especial de Observable que também é um Observer. Permite multicast (distribuir) valores para vários assinantes.

Operadores populares do RxJS

Os operadores são o coração do RxJS. Eles permitem processar fluxos de dados de forma declarativa. Vejamos alguns frequentemente usados:

• map — transforma cada valor do fluxo de acordo com uma função fornecida.
• filter — permite apenas os valores que satisfazem uma condição.
• mergeMap — projeta cada valor em um Observable e mescla os resultados em um único fluxo.
• debounceTime — atrasa a emissão de valores por um tempo especificado (útil para campos de pesquisa).
• catchError — captura erros no fluxo e retorna um Observable alternativo.

Exemplo de uso de operadores para processar cliques:

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('Clique com coordenadas:', pos);});

Exemplo prático: formulário de pesquisa reativo

Vamos considerar uma tarefa típica — implementar uma pesquisa com autocompletar. Com RxJS, isso é feito de forma elegante e sem callbacks aninhados:

import { fromEvent } f