No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
1H
33M
9S

Union Types

14/24
Recursos

Nos permite definir m谩s de un tipo de dato a una variable, argumento de una funci贸n, etc.

let userId: string | number;

userId = 10;
userId = "10";

function helloUser(id: string | number){
    console.log(`Hola usuario con el n煤mero de id ${id}`);
}

Aqu铆 indicamos que id y userId pueden ser de tipo string o number.

Una mejor pr谩ctica

El tipo de dato any nos brinda la flexibilidad de JavaScript en TypeScript con respecto al tipado. Sin embargo, si deseamos eso, es mejor hacer uso de los Union Types.

Contribuci贸n creada por: Mart铆n 脕lvarez.

Aportes 13

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 =鈥漚bcde鈥
5
6 function greeting(myText: string | number){
7 if(typeof myText ===鈥漵tring鈥){
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.