Union Types

Los union types son especialmente útiles cuando quieres definir tu propio tipo de dato, en ese caso acotas tu variable al tipo de dato personalizado y con union determinas qué valores quieres que tenga, tu variable no recibirá valores diferentes a lo que tú definas.

Especialmente útil en catálogos.

Resumen de la clase

Los Union Types nos permiten una mayor flexibilidad al momento de tipear variables. En caso de que una variable pueda ser boolean, string o number, los Union Types quedarían de la siguiente manera.

let foo: string | boolean | number;

Lo magico aqui es que al hacer validaciones, TS nos proporciona los metodos para cada tipo de data, segun sea el caso.

let foo: string | boolean | number = 100;

if(typeof foo === "string"){
  console.log(foo.toLowerCase())
} else if(typeof foo === "number"){
  console.log(foo.chartAt(0))
} else{
  console.log(foo)
}

Los métodos usados se auto-completan por el editor de texto…

noté que se debe usar directamente el typeof y no a través de una variable/constante

y que también se puede usar con un switch

Les comparto mis apuntes. 😄

Unión de tipos

• En TypeScript se puede definir una variable con múltiples tipos de datos: Union Type.
• Se usa el símbolo de pipe (’|’) entre los tipos.
• La declaración es explícita, tenemos que aclarar los tipos de datos que vamos a usar.
• Podemos poner la cantidad de tipos de datos que deseemos, pero por lo general van dos o tres.

Sintaxis

Variables

	let variableName: dataType1 | ... | dataTypeeN = value;

Parámetros de funciones

Función declarativa

function funtionName (parameter: dataType1 | ... | dataTypeN): dataTypeReturn { 
		statements 
}

Arrow function

const functionName = (parameter: dataType1 | ... | dataTypeN): dataTypeReturn => {
		statements
}

Parte de los apuntes provienen del Curso de Fundamentos de TypeScript 2020

(()=>{
let userId:string | number;

userId = 23154;
userId = 'hola';

function greeting(myText: string | number){
//cuando sea un string actuo de una forma y cuando sea un number de otra forma
//guardiones
//El operador typeof devuelve una cadena que indica el tipo del operando sin evaluarlo. 
//operando es la cadena, variable, palabra clave u objeto para el que se devolverá su tipo.
if(typeof myText == 'string'){
    console.log(`string ${myText.toLowerCase()}`)

} else {
    console.log(`number ${myText.toFixed(1)}`)

}

}
 greeting('Migue');
 greeting(13.313); 
})();

en VSC presionan f1: escriben fragmentos de codigo = escojen Typescript y puede usar estas si no tienen aun:

	"ifee": {
		"prefix": "ife",
		"body": [
			"(()=>{\n\t$1\n})();",
		],
		"description": "fn IFFEE"
	},
	"afn": {
		"prefix": "afn",
		"body": [
			"const ${1:name}=($2)=>$3",
		],
		"description": "arrow fn"
	},
	"anfn": {
		"prefix": "anfn",
		"body": [
			" ($1)=>$2",
		],
		"description": "anon arrow fn"
	}

La ayuda de tipado tambien se coloca dependiendo el valor que tiene la variable en ese momento. Si es un string te apareceran metodos para el string y si es number te apareceran los metodos de number. No es necesario hacer explicitamente el if pero si ayuda mucho sobre todo cuando no sabes cual es el valor que te va a llegar en ese momento.

Wow, no conocía ese scope en TS dentro de VS Code. ¡Me parece fabuloso!

Los Union Types son parte de la declaración de variables, que permiten que nosotros definamos más de un tipo de valor que puede recibir.

Por ejemplo, tenemos un bloque de código que recibe el ID de un objeto, y que deseamos reutilizarlo. Pero en el bloque original sólo se recibían números (1247, 1024), en la nueva implementación del código se pueden recibir valores alfanumericos (A743, B958).

Entonces, en el código, declaramos que la variable id puede recibir valores de tipo number o string:

const id: string | number;

✅

Ejemplo utilizando los union types

(()=>{
  // variable con diferente tipos
  let vari: number | string;
  vari = 'Christian';
  vari = 345345.345;
// esto de los unio types es conveniente porque nos permite tener varios tipos para nuestra variable y asi controlar mejor nuestro programa
// es conveniente en el uso de las funciones
function cargarCosa(cosita: number | string){
  if(typeof cosita === 'string'){
    return cosita.toUpperCase();
  }else{
    return cosita.toFixed(1);
  }
}
console.log(cargarCosa('Christian'));
console.log(cargarCosa(vari));
})()

Esta clase es joyita 🤯

En la doc tambien lo explican muy claro

Amazing

Muy interesante y versátil los Union Types

ok

Usualmente en VC, cuando escribimos en nuestro codigo el nombre de nuestra variable y un punto, VC nos despliega una lista con las propiedades y metodos que le corresponden al tipo de nuestra variable,

pero… ¿Que si nuestra variable puede ser de tipos diferentes?. Aquí es donde viene la magia. ya que con typescript, si usamos el operador typeof de JS, de la siguiente manera:

1(()=>{
2 let userId: string | number;
3 userId = 1212
4 userId =”abcde”
5
6 function greeting(myText: string | number){
7 if(typeof myText ===”string”){
8 myText. // Despues del punto se despliegan solo metodos y propiedades de string
9 }else{
10 myText.// Despues del punto se despliegan solo metodos y propiedades de number
11 }
12 }
13 })()

TypsScript es capaz de que en cada bloque del if es capaz de saber que lista nos debe desplegar ya sea que como en este caso sea string o number

let userId: string | number;

A esto tambien se le conoce como tuplas.

Vaya, se me hizo interesante la parte de la función que recibe o string o number.
En el lenguaje Julia ataca ese problema con el multipatch. Me desagradaba el multipatch de Julia, pero comparandolo con TS o JS, ahora veo sus ventajas.