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

Discussion (0)