TypeScript / Evitar tragarse valores Observables

Bienvenidos sean a este post, hoy veremos una particularidad de Observables.

En los dos posts anteriores vimos como emitir los datos mediante of y from, y como recibirlos ya sea mediante subscribe directamente, o mediante pipe y map. Pero los ultimos dos denominados operadores observables pueden tener un inconveniente. Esta es la posibilidad de tragarnos algunos de los valores enviados. Vamos a analizar el siguiente codigo:

import {of, Observable} from 'rxjs';
import {map} from 'rxjs/operators';
const emisor: Observable<number> = of(1,2,3,4);
const tragaos = emisor.pipe(
        map((valor: number) => {
                console.log("tragando: " + valor);
        })
);
tragaos.subscribe((valor: void) => {
        console.log("recibido: " + valor);
});

Las dos primeras lineas seran para importar las funciones y tipos que usaremos en el resto del codigo. Estas son las funciones of y map, y el tipo es Observable. Lo primero sera definir al emisor, en este caso mediante of preparamos el envio de cuatro valores. La siguiente sera una constante para recibir el valor procesado por pipe sobre la constante anterior. Este recibira los valores enviados por of, lo procesara y mostrara en la consola. Lo siguiente sera aplicar subscribe a la constante anterior para recibir los valores que debe enviar este y lo mostraran en la consola. Compilemos y veamos como es su salida:

$ node mirar.js
tragando: 1
recibido: undefined
tragando: 2
recibido: undefined
tragando: 3
recibido: undefined
tragando: 4
recibido: undefined
$

Este es el inconveniente que mencionamos en el titulo. Esto es porque no devolvemos ningun valor una vez finalizada la funcion encargada de recibir el dato proveniente del of. Por lo tanto, el subscribe al solicitarlo no recibira nada. Para solucionarlo vamos a modificar el codigo anterior de la siguiente manera:

import {of, Observable} from 'rxjs';
import {map} from 'rxjs/operators';
const emisor: Observable<number> = of(1,2,3,4);
const tragaos = emisor.pipe(
        map((valor: number) => {
                if ((valor % 2) != 0) {
                        return null;
                }
                return valor;
        })
);
tragaos.subscribe((valor: number | null) => {
        console.log("recibido: " + valor);
});

Las modificaciones fueron leves pero notorias. La primera fue modificar el bloque del map donde verificamos si el modulo de la divsion del valor recibido con 2 es distinto de 0 procede a devolver un null. En caso de no cumplirse la condicion devolvemos el valor recibido. La otra es en subscribe donde en vez de tener el tipo void ahora recibira los tipos number o null. El resto del codigo es igual a lo visto anteriormente. Compilemos y veamos como es su salida:

$ node mirar.js
recibido: null
recibido: 2
recibido: null
recibido: 4
$

En este caso sin importar la situacion nos aseguramos que subscribe recibe un valor, en este caso un number o un null, a diferencia de como sucedia antes que era undefined. Deben tener cuidado con este tema porque una devolucion equivocada puede derivar en un tipo unknown y esto puede generar otro tipo de errores en Observables.

En resumen, hoy hemos visto como podemos «tragarnos» informacion observable, los inconvenientes que podemos tener, como solucionarlo y un par de inconvenientes que pueden suceder. Espero les haya resultao 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.