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…

(()=>{
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); 
})();

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

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

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!

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

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.