DEV Community

Cristian Fernando
Cristian Fernando

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

Veamos algunos ejemplos:

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

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

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

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",
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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",
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

O en su sintaxis de función flecha:

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

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"))

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)