sábado, 27 de junio de 2020

Unión de tipos en Typescript


La unión de tipos están estrechamente relacionados con la intersección de tipos, pero se usan de manera muy diferente. Ocasionalmente,nos encontraremos con una librería que espera que un parámetro sea un número o una cadena. Por ejemplo, la siguiente función:

/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: any) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

padLeft("Hello world", 4); // returns "    Hello world"

Al tipar padding como any no estamos utilizando las ventajas del lenguaje de tipado estático y corremos el riesgo que se lance el error dado que han utilizado dicha función con otro tipo. 

En lugar de any, podemos usar un tipo de unión para el parámetro:

/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: string | number) {
    // ...
}

let indentedString = padLeft("Hello world", true); // esto no compila

Un tipo de unión describe un valor que puede ser uno de varios tipos. Usamos la barra vertical (|) para separar cada tipo, por lo tanto string | number es el tipo de valor y que puede ser un número o una cadena.

Si tenemos un valor que tiene un tipo de unión, solo podemos acceder a los miembros que son comunes a todos los tipos de la unión.

La diferencia con la intersección es que este parámetro puede ser uno o el otro tipo. Pero en la intersección debe ser los dos, es un y. 

Dejo link : 
https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types

No hay comentarios.:

Publicar un comentario