Fundamentos de TypeScript 🦆| #7: Unión de tipos y Type Alias
Tags: typescript, webdev, beginners, spanish
Published: 2022-01-15 14:41:39

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:

```js
let nombreVariable: tipoA | tipoB | tipoN = valor;
```
Veamos algunos ejemplos:

```js
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:

```js
const arreglo: (number | string)[] = [1,2,3, "Hola mundo"];
```
> *Este arreglo acepta tanto cadenas como números*

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

```ts
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:

```ts
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`:

```ts
type nombreDelAlias = unionDeTipos;
```

Veamos algunos ejemplos:
Para nuestro arreglo visto anteriormente:

```js
// 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:

```ts
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:

```ts

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:

```ts
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:

```js
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


```ts
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**
{% youtube BwuLxPH8IDs %}