Usar RxJS con TypeScript

1. Ejecución asíncrona de TypeScript
2. Programación reactiva con RxJS
3. Configurar RxJS con TypeScript
4. Consumir RxJS dentro de TypeScript

TypeScript es un superconjunto del lenguaje JavaScript que admite la escritura estática y la verificación de tipos, al tiempo que mantiene todas las demás características que ofrece JavaScript. Una de las características avanzadas y ampliamente utilizadas es la ejecución asincrónica de programas.

Las aplicaciones modernas son altamente interactivas y están orientadas al consumidor. Por lo tanto, la mayor parte de la información está disponible de forma asíncrona.

Hay varias técnicas disponibles en TypeScript para manejar la lógica asíncrona, como devoluciones de llamada, promesas y eventos.

Ejecución asíncrona de TypeScript

Las funciones de devolución de llamada fueron la técnica más antigua utilizada para manejar código asíncrono. Hubo algunos inconvenientes con las devoluciones de llamada, como la falta de una forma adecuada de detectar errores, la introducción de un infierno de devolución de llamada y problemas de mantenimiento.

Por lo tanto, se ha introducido el concepto de la promesa. Una promesa imita una promesa del mundo real donde una operación asíncrona genera un resultado final que puede ser un éxito o un fracaso.

En TypeScript, un objeto de promesa acepta una función con dos parámetros llamados resolver y rechazar para cumplir o fallar la promesa. Este es un gran paso en la programación asincrónica, pero los problemas de devolución de llamada todavía están ahí.

La técnica de publicador-suscriptor es otra forma popular de manejar eventos asincrónicos. Siempre que cambie el estado de un objeto, enviará notificaciones a sus suscriptores u observadores.

Es una forma más avanzada de manejar operaciones asincrónicas que las devoluciones de llamada, pero aún tiene algunos inconvenientes, como no poder suscribirse a una serie de eventos para manejarlos secuencialmente, los eventos pueden perderse para siempre, etc.

Programación reactiva con RxJS

Como se mencionó anteriormente, el procesamiento de eventos es como encontrar la salida de un laberinto. Por lo tanto, la implementación de la aplicación basada en eventos fue engorrosa.

Por lo tanto, se introdujo la metodología de programación reactiva. Simplificó la ejecución de código asíncrono y la implementación de programas controlados por eventos en TypeScript.

Se basa en el concepto de Observable. Además, se han utilizado los patrones de observador e iterador.

Configurar RxJS con TypeScript

Primero, necesitamos crear un proyecto Node.js. Puede instalar Node.js desde el sitio oficial.

Cuando instala Node.js, configura automáticamente el NPM para usted. Generemos el archivo package.json como se muestra a continuación.

npm init

Le pedirá que ingrese detalles adicionales para su proyecto de Nodo y que se adhiera a los predeterminados por ahora.

La biblioteca RxJS está disponible como paquete NPM. Por lo tanto, podemos instalarlo con npm como se muestra a continuación.

npm install rxjs
OR
npm i rxjs

Crearía una carpeta separada node_modules para mantener todas las dependencias de terceros, incluido el módulo RxJS.

A continuación, debemos generar el archivo de configuración de TypeScript, que contiene algunas configuraciones básicas para el compilador de TypeScript.

tsc --init

Esto generaría un nuevo archivo JSON llamado tsconfig.json. Agreguemos las siguientes entradas.

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

Aquí la matriz de archivos contiene todos los archivos que necesitamos compilar. En este ejemplo, escribiremos toda la lógica de TypeScript en el archivo rxjstest.ts.

Consumir RxJS dentro de TypeScript

Como ya hemos instalado la biblioteca RxJS, podemos importar los tipos y métodos necesarios desde el módulo rxjs. En este ejemplo, importaremos el tipo Observable y el método of de la biblioteca rxjs.

import { of, Observable } from "rxjs";

Vamos a crear un nuevo objeto de tipo Observable que publique los valores de temperatura de una ciudad.

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

El weatherPublisher es un objeto de tipo Observable que genera cuatro valores numéricos utilizando el método RxJS of.

A continuación, podemos suscribirnos al observable weatherPublisher. Emite cuatro temperaturas, como se muestra a continuación.

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

Ya que hemos terminado con el código, compilemos el archivo rxjstest.ts usando el siguiente comando.

tsc -p ./tsconfig.json

Generaría el archivo JavaScript correspondiente. Luego, podemos ejecutar el archivo JavaScript como se muestra a continuación.

node rxjstest.js

Producción :

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

La biblioteca RxJS funciona bien con la configuración de TypeScript.