TypeScript / pipe y map

Bienvenidos sean a este post, hoy seguiremos con los Observables.

En el post anterior presentamos a la funcion subscribe para poder recibir a los valores enviados por of y from. La libreria RxJs nos provee una similar llamada pipe pero en lugar de tomar una sola funcion como argumento nos permite tener varias y aplicarlas a cada uno de los valores emitidos por el Observable. Las funciones que son provistas comunmente se las denomina como operadores observables, por que aceptan observables como entrada y devuelve un observable como salida, con esto podemos decir que pipe emite un stream Observable. Vamos a analizar el siguiente codigo:

import {of, Observable} from 'rxjs';
import {map} from 'rxjs/operators';
const emisor = of(1,2,3,4);
const modulos = emisor.pipe(
        map((valor: number) => {
                console.log("Recibido: " + valor);
                return valor % 2;
        }));
modulos.subscribe((valor: number) => {
        console.log("modulos: " + valor);
});

La primera linea nos importa la funcion of y el tipo Observable de la libreria. La segunda importa la funcion map desde el modulo operators en la libreria rxjs. Luego configuramos el emisor para que envie los datos mediante of a los suscriptores, como vimos en el post anterior, pero aqui usaremos otras funciones. Lo siguiente sera crear una constante llamada modulos donde recibira el valor procesado por pipe aplicado al emisor. en este pasaremos la funcion map que recibira solo una funcion y en este recibiremos el valor emitido por of. En este caso mostraremos en la consola el valor recibido y por ultimo devolveremos el valor del modulo de la division de este por 2. Por fuera de este aplicaremos el subscribe a la constante anterior y en este mostraremos en consola el valor recibido. Compilemos y veamos la salida:

$ node mirar.js
Recibido: 1
modulos: 1
Recibido: 2
modulos: 0
Recibido: 3
modulos: 1
Recibido: 4
modulos: 0
$

Como pueden ver alterno entre ellos debido a la emision entre unos y otros. Anteriormente mencionamos que map recibe un solo valor y tambien de tipo funcion. Esta al igual que pipe y subscribe se utiliza para aplicar esta funcion al valor emitido que se recibe pero tambien posee la capacidad de poder mapear este valor a otro o modificarlo. En el ejemplo vemos los dos casos, no solamente lo pasa al subscribe que le aplicamos luego sino tambien toma el valor de la aplicacion del operador modulo (%).

Otra curiosidad con respecto a lo visto en el post anterior es que nunca le establecimos los tipos a las constantes que usamos con las funciones. Esto no es estrictamente necesario porque typescript sabe trabajar muy bien con los Observables pero siempre es recomendable especificar cual es el tipo de dato a devolver. No solo porque nos da una mejor visualizacion a la hora de leerlo sino tambien nos da mayor visual ante algun eventual error.

Recuerdan que al comienzo mencionamos que pipe a diferencia de subscribe o map soporta mas funciones como argumento, por esta razon se las denomina como operadores de Observables, pero como podemos aplicarlo? para ello, tomemos el codigo anterior y realicemos la siguiente modificacion:

import {of, Observable} from 'rxjs';
import {map} from 'rxjs/operators';
const emisor: Observable<number> = of(1,2,3,4);
const mapita = emisor.pipe(
        map((valor: number) => { return valor * 2; }),
        map((valor: number) => { return "cdn_" + valor; })
);
mapita.subscribe((valor: string) => {
        console.log("mapita emitio: " + valor);
});

Las primeras tres lineas se mantienen iguales a lo visto en el codigo anterior, salvo por emisor que ahora especificamos el tipo que devolvera, los cambios comienzan a partir de la siguiente. Cambiamos el nombre de modulo a mapita pero sigue conteniendo el resultado de aplicar pipe al emisor. Pero ahora tenemos dos operadores o dos funciones map. En el primero tomaremos el valor enviado y devolveremos la multiplicacion de este por 2. La segunda funcion tomara el valor anterior y lo concatenara a una cadena de texto para devolver el resultado de esta accion.

Lo siguiente sera aplicar el subscribe a la constante anterior. Este tiene una sola funcion y recibira un valor de tipo string para luego mostrarlo en la consola haciendo referencia de donde provino. Compilemos y veamos la salida:

$ node mirar.js
mapita emitio: cdn_2
mapita emitio: cdn_4
mapita emitio: cdn_6
mapita emitio: cdn_8
$

Pudimos ver como funciono perfectamente lo detallado anteriormente donde se proceso la informacion enviada, la devolucion de esta fue recibida por el segundo operador de Observables y este ultimo fue tomado por el subscribe. Otra curiosidad que paso en el camino fue la transformacion de number a string en el medio, por esta razon el subscribe cambio el tipo. Hoy hemos visto otra alternativa a of para procesar la informacion enviada al subscribe.

En resumen, hoy hemos visto pipe y map, cuales son, para que sirven, como se utilizan, sus coincidencias y diferencias entre si, una serie de ejemplos para verlo en accion con distintas facetas. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.