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
ytelefono
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