TypeScript / Union de tipos

Bienvenidos sean a este post, hoy veremos una operacion sobre tipos de datos.

Hasta ahora comentamos que de manera predeterminada javascript utiliza cualquier tipo de dato y lo podemos modificar en cualquier momento, a esto se lo denomina como tipo loose pero en typescript agregamos el tipo strong. Este es basicamente la asignacion de un tipo especifico para las variables y solamente reciben ese tipo de dato, tambien vimos otros tipos pero centremonos en este ultimo.

Aqui entra en accion la union de tipos, el cual es representado por el simbolo de pipe (|) y nos permite poder elegir entre dos tipos de datos, veamos primero su sintaxis:

let nombre_var: tipo_1 | tipo_2 = valor;

Es como definir un tipo de dato para una variable pero en lugar de pasar uno solo pasaremos dos y en el medio ira el simbolo de pipe, despues el resto sigue igual que antes, pero veamos un ejemplo practico para verlo en accion:

function mostrar(dato: string | number)
{
        console.log(dato);
}
mostrar("tinchicus");
mostrar(123);

Primero definimos una funcion donde recibiremos un dato, este puede ser de tipo string o number, esto gracias al operador de union, luego unicamente lo mostraremos en pantalla. Lo siguiente es hacer dos llamados a esta funcion pero primero con un valor de tipo string y luego uno de tipo number, si lo compilan y ejecutan veran la siguiente salida:

$ node union.js
tinchicus
123
$

A diferencia de lo que comentamos en este post ahora podemos almacenar dos tipos de datos en una misma variable en caso de necesitar utilizar un tipo u otro, obviamente esta es una opcion mas viable a utilizar any de la cual hablamos en este post, tomemos el codigo y modifiquemoslo de la siguiente manera:

function mostrar(dato: string | number)
{
        console.log(dato);
}
mostrar("tinchicus");
mostrar(123);
mostrar({a: 1, b: 2, c: 3});

En este caso simplemente agregamos un llamado mas pero con un array en lugar de los tipos permitidos, si lo compilamos obtendremos esto:

$ tsc union.ts
union.ts:7:9 - error TS2345: Argument of type '{ a: number; b: number; c: number; }' is not assignable to parameter of type 'string | number'.

7 mostrar({a: 1, b: 2, c: 3});
          ~~~~~~~~~~~~~~~~~~


Found 1 error in union.ts:7

$

Como comentamos cualquier dato que este fuera de los dos declarados nos impedira compilarlo, por lo tanto como dijimos antes sigue siendo una mejor opcion al tipo any y nos brinda una mayor posibilidad a la hora de declarar nuestras variables.

En resumen, hoy hemos visto union, que es, para que sirve, como se utiliza, tanto en variables, como en una funcion, vimos un ejemplo practico y como funciona con otros tipos de datos, 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.