Fundamentos de TypeScript 🦆| #7: Unión de tipos y Type Alias

La unión de tipos es una característica muy fácil y también muy importante de comprender puesto que este patrón es ampliamente usado y potente al momento de desarrollar apps con TypeScript.

¿Qué es la unión de tipos?

Esta funcionalidad del lenguaje nos permite generalizar la declaración de variables y funciones, dicho de otra manera, podemos hacer que una variable admita más de un tipo de dato, haciendo un poco más flexible a TypeScript.

Sintaxis

Para usar la unión de tipos basta con separar los tipos de datos con un pipe |, de la siguiente manera:

let nombreVariable: tipoA | tipoB | tipoN = valor;

Veamos algunos ejemplos:

let id: number | string = 10;
// id acepta tanto valores numéricos como cadenas de texto:
let id: number | string = "10";

También podemos usar unión de tipos en arreglos:

const arreglo: (number | string)[] = [1,2,3, "Hola mundo"];

Este arreglo acepta tanto cadenas como números

Y sí, adivinaste... también en objetos:

const persona:{
  id:number | string;
  nombre:string;
  telefono: number | string;
} = {
  id:1,
  nombre:"Cris",
  telefono:"99-5269-122",
}

El objeto en sus claves, id y telefono pueden aceptar números y cadenas.

Unión de tipos en funciones

En funciones es posible usar unión de tipos en los parámetros y en su valor de retorno:

function concatOrSum(valor1:string | number, valor2:string | number): string | number {
  let isString = typeof valor1 === "string" && typeof valor2 === "string";
  let resultado;
  if(isString){
    resultado = valor1.toString() + " " + valor2.toString();
  }else{
    resultado = Number(valor1) + Number(valor2);
  }
  return resultado;
}

console.log(concatOrSum("Carlos", "Ramirez")) // "Carlos Ramirez"
console.log(concatOrSum(2,9)) // 11

En este ejemplo dependiendo de los argumentos que pasemos a la función, la misma reacciona de diferente manera; si le pasamos cadenas las concatena y si le pasamos números los suma.

Type Alias

Cuando usamos uniones de tipos el código suele volverse más verboso de lo que debería, para ello podemos usar Type Aliases para crear nuestros propios tipos de datos y luego solo asignarlos.

La sintaxis es muy sencilla, usamos la palabra reservada type:

type nombreDelAlias = unionDeTipos;

Veamos algunos ejemplos:
Para nuestro arreglo visto anteriormente:

// En vez de esto:
const arreglo: (number | string)[] = [1,2,3, "Hola mundo"];

// podemos hacer esto:
type ArregloStringOrNumber = string | number;
const arreglo: (ArregloStringOrNumber)[] = [1,2,3, "Hola mundo"];

Para un objeto podríamos hacer algo como:

type Persona = {
  id:number | string;
  nombre:string;
  telefono: number | string;
}

const persona:Persona = {
  id:1,
  nombre:"Cris",
  telefono:"99-5269-122",
}

Y finalmente para la función:

type StringOrNumber = string | number;

function concatOrSum(valor1:StringOrNumber, valor2:StringOrNumber): StringOrNumber {
  let isString = typeof valor1 === "string" && typeof valor2 === "string";
  let resultado;
  if(isString){
    resultado = valor1.toString() + " " + valor2.toString();
  }else{
    resultado = Number(valor1) + Number(valor2);
  }
  return resultado;
}

Para concluir, podemos usar también el operador type para declarar constantes de la siguiente manera:

type DiasSemana = "Lunes" | "Martes" | "Miecoles" | "Jueves" | "Viernes" | "Sabado" | "Domingo" ;

function isDiaLaboral(dia:DiasSemana):boolean{
  return dia !== "Domingo" && dia !== "Sabado";
}

O en su sintaxis de función flecha:

const isDiaLaboral = (dia:DiasSemana): boolean => dia !== "Domingo" && dia !== "Sabado";

Esta función regresa true si le pasamos un día hábil de la semana, caso contrario regresará false.

Si pasamos un valor que no está incluido en nuestro type obtendremos un error

const isDiaLaboral = (dia:DiasSemana): boolean => dia !== "Domingo" && dia !== "Sabado";
console.log(isDiaLaboral("jjj"))

Argument of type '"jjj"' is not assignable to parameter of type 'DiasSemana'

---

Conclusiones

• La unión de tipos permite extender las variables y funciones de modo que puedan soportar más de un tipo de dato.
• Los type alias simplifican un poco la sintaxis permitiendo crear nuestros propios tipos de datos.

Referencias