Union Types

Clase 14 de 24 • Curso de TypeScript

Contenido del curso

Introducción a TypeScript

Tipos de datos primitivos

Tipos de datos especiales

Próximos pasos

24
Toma el Curso de Tipos Avanzados y Funciones en TypeScript
01:01 min

Tomar examen

Resumen

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.

Comentarios

Pepe Sosa

student•

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.

Mayk Edison Perez Arzapalo

student•

Sería bueno un ejemplo para mayor comprensión...

Angel Aponte

student•

Un ejemplo de este punto, es cuando tienes una función a la cual le defines un tipado para los argumentos de entrada. Pero que pasa cuando quieres reutilizar esa función en un punto diferente de tu código y no cumples con el tipo de datos de esta función???,

Tienes que agregar el otro tipado asociado a la función anterior para que pueda ser utilizada desde dos puntos distintos del código.

Es un poco abstracto pero cuando lo usas con los controladores/servicios adquiere mucho significado y puedes validar bien los tipos de datos.

Irving Juárez

student•

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

Giancarlos Montiel

student•

Soy nuevo en este mundo de TS espero que lo que hice este bien, use este código y en su ejecución estuvo OK.

Cristian Ignacio Zuñiga Medina

student•

no es tipear, es tipar

Flavio Fernando Barrantes Sotelo

student•

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

Jose Ever Muñoz Muñoz

student•

resolviste una duda que no sabía que tenía 🤯

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

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

mmorenov6489

student•

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

Rodrigo Andrés Moreno Pertúz

student•

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

Roiner Hernandez

student•

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.

Miguel Angel Reyes Moreno

student•

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

Rolando Osorio

student•

Si necesitas flexibilidad en TS puede hacer uso de los Union Types que nos permite definir más de un tipo de dato a una variable, argumento de una función, etc.

let userID: string | number;
    userID = '123';
    getID(userID)

    userID = 123;
    getID(userID)

    function getID(id:(string | number)) {
        if (typeof id === "string") {
            console.log(`el ID str del usuario es: ${id}`);
        } else if(typeof id === "number") {
            console.log(`el ID num del usuario es: ${id}`);
        }
    }

Aquí indicamos que id y userId pueden ser de tipo string o number. Y al entrar al if, dependiendo de si entro al de string o al de number el parametro actua como un string o un number

jonathan gonzalez

student•

si le pasas un NaN a la función lo toma como numero 😏

Hiram Rodriguez Gomez

student•

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;

Carlos Valdez

student•

union types son perfectos para hacer los sistemas para migracion de datos!

Daniel Avila Cardenas

student•

¿Cuándo es importante usar union types?

Datos provenientes de APIs o backend: cuando un campo puede llegar como número o como string (ejemplo: IDs que a veces vienen como "123" y otras como 123).

Parámetros flexibles en funciones: cuando quieres que una función acepte distintos tipos de entrada sin perder seguridad de tipos.

Migraciones o integración con sistemas externos: cuando trabajas con datos que no tienen un formato fijo.

Evitar any: en lugar de usar any (que elimina la seguridad de tipos), los union types permiten restringir a un conjunto específico de tipos válidos.

Jean Bustamante

student•

Cómo se hace para que se guarden los cambios y se generen los archivos en .js? No recuerdo en qué clase era pero cuando cerré y abrí VSC ya no se guarda.

Hector Maluy Fernandez

student•

Me parece que era con este comando en la terminal.

npx tsc --watch

ANDRES ALFONSO MIRA MEJIA

student•

✅

CHRISTIAN DANIEL LA CRUZ COTUA

student•

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

Geordy Elian Reyes Mendoza

student•

Esta clase es joyita 🤯

Kevin Parra Lopez

student•

En la doc tambien lo explican muy claro

Rodrigo Angel Zucchini

student•

Amazing

Jean Sebastian Rodriguez Agredo

student•

Muy interesante y versátil los Union Types

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

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

let userID: string | number;
    userID = '123';
    getID(userID)

    userID = 123;
    getID(userID)

    function getID(id:(string | number)) {
        if (typeof id === "string") {
            console.log(`el ID str del usuario es: ${id}`);
        } else if(typeof id === "number") {
            console.log(`el ID num del usuario es: ${id}`);
        }
    }

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

Union Types

Introducción a TypeScript

Por qué usar TypeScript

TypeScript vs. JavaScript

Configurado nuestro proyecto

Atrapando bugs

El compilador de TypeScript

Veamos el TSConfig.json

Tipos de datos primitivos

Qué es el tipado en TypeScript

Tipos inferidos

Numbers

Booleans

Strings

Arrays

Tipos de datos especiales

Any

Union Types

Alias y tipos literales

Null y Undefined

Funciones

Retorno de funciones

Objetos en funciones

Objetos como tipos

Módulos: import y export

Usando librerías que soportan TypeScript

Usando librerías que NO soportan TypeScript

Próximos pasos

Toma el Curso de Tipos Avanzados y Funciones en TypeScript