A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Uni贸n de Tipos, Alias y Tipos Literales

17/32
Recursos

Aportes 38

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Una funci贸n en Typescript puede recibir como par谩metro diferentes tipos predefinidos usando Union Types

function whatTime(hour: number | string, minute: number | string) : string {
  return hour+':'+minute;
}

whatTime(1,30) //'1:30'
whatTime('1',30) //'1:30'
whatTime(1,'30') //'1:30'
whatTime('1','30') //'1:30'

Usando Alias podemos reducir la cantidad de c贸digo en los tipos predefinidos.

type Hours = number | string;
type Minutes = number | string;

function whatTime(hour: Hours, minute: Minutes) : string {
  return hour+':'+minute;
}
/* En TypeScript se puede definir una variable con multiple tipos de datos: Union Type
 * - Se usa el simbolo de pipe ('|') entre los tipos
 */
export {}

// 10, '10'
let idUser: number | string;
idUser = 10;
idUser = '10';
// Buscar username dado un ID
function getUsernameById(id: number | string) {
    // logica de negocio, find the user
    return 'luixaviles';
}
getUsernameById(20);
getUsernameById('20');

/* Alias de Tipos: El alias se puede aplicar tambien a un conjunto o combinacion de tipos */
// alias de tipos: TS
type IdUser = number | string;
type Username = string;
let idUser: IdUser;
idUser = 10;
idUser = '10';

// Buscar username dado un ID
function getUsernameById(id: IdUser): Username {
    // logica de negocio, find the user
    return 'luixaviles';
}
getUsernameById(20);
getUsernameById('20');

/* Tipos literales */
// 100x100, 500x500, 1000x1000
type SquareSize = '100x100' | '500x500' | '1000x1000';   // string | number
// let smallPicture: SquareSize = '200x200'; // --> Error
let smallPicture: SquareSize = '100x100';
let mediumPicture: SquareSize = '500x500';
enum PicturesSizes {
    small = '75x75',
    medium = '240x180',
    large = '500x375',
    extraLarge = '1024x768',
    superLarge = '3072x2304'
}

const picturaSmall: PictureOrientation = PictureOrientation.Landscape;

type PhotoSizesType = '75x75' | '240x180' | '500x375' | '1024x768' | '3072x2304'

const medium : PhotoSizesType= '240x180';```

Si no entendiste Tipos Lirerales, piensa en ello como limitar el contenido de la variable.
As铆 como un boolean puede contener s贸lo truefalse, puedes crear tu propio tipo de variable con el contenido que necesites.

Union de tipos. permite definir una variable con multiples tipos de datos. Se usa el pipe para unirlos | .

let idUser = number | string;
idUser = 10;
idUser = '10';

tambien sirve para los argumentos de una funcion.

Alias de tipos: Permite crear alias como nuevo nombre para un tipo. Usa la palabra reservada type.

type IdUser = number | string; 
let idUser : IdUser; 
idUser = 10;
idUser = '10';

TIpos literales: Una variable con un tipo literal puede ocntener unicamente uina cadena del conjunto. Se usan cadenas como 鈥榯ipos鈥, combinados con el simbolo pipe | entre ellos. Yo lo veo como una forma de enum.

type SquareSize = '100x100' | '500x500' | '1000x1000'

Este editor es una basura desde hace a帽os. Si por error paso a la siguiente clase o refresco la pagina, pierdo todo lo que hab铆a escrito.

Reto completado ;D

Uni贸n de Tipos, Alias y Tipos Literales

<h5>Uni贸n de Tipos</h5>
  • 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
<h5>Alias de Tipos</h5>
  • TypeScript permite crear un alias como nuevo nombre para un tipo
  • El alias se puede aplicar tambi茅n a un conjunto de combinaci贸n de tipos
  • Se usa la palabra reservada type
<h5>Tipos Literales</h5>
  • Una variable con un tipo literal puede contener 煤nicamente una cadena del conjunto
  • Se usan cadenas como 鈥渢ipos鈥, combinados con el s铆mbolo de pipe | entre ellos
export {}

//* Por ejemplo, tenemos usuarios que tienen un ID num茅rico o de tipo string 10, '10'
let idUser: number | string //* Aceptar谩 strings y number
idUser = 10
idUser = '10'

//* Buscar username dado un ID

function getUserNameById(id: number | string) {
  //* L贸gica de negocio, find the user
  return id
}

//* No da errores 馃槃
getUserNameById(10)
getUserNameById('10')

//--------------------------------------------------------------------------------------------

//* Alias de tipos de TS
type IdUser = number | string
type UserName = string
let userID: IdUser
idUser = 10
idUser = '10'

//* Buscar username dado un ID

function getUserName(id: IdUser): UserName {
  //* L贸gica de negocio, find the user
  return 'Mike'
}

//----------------------------------------------------------------------------------------------------

//* Tipos literales
//* Por ejemplo, s贸lo aceptamos fotos de 100x100, 500x500 y 1000x1000
type SquareSize = '100x100' | '500x500' | '1000x1000'
//! let smallPicture: SquareSize = "200x200" //!Esto da un error, no est谩 incluido ese valor en SquareSize
let smallPicture: SquareSize = "100x100"
let mediumPicture: SquareSize = "500x500"
let bigPicture: SquareSize = "1000x1000"

console.log('small Picture: ', smallPicture)
console.log('medium Picture: ', mediumPicture)
console.log('big Picture: ', bigPicture)

type PhotoSizes = '75x75' | '240x180' | '500x375' | '1024x768' | '3072x2304'
type FuncString = string 

function differentsPhotos(name: FuncString): FuncString{

  let square: PhotoSizes = '75x75'
  let small: PhotoSizes = '240x180'
  let medium: PhotoSizes = '500x375'
  let big: PhotoSizes = '1024x768'
  let veryBig: PhotoSizes = '3072x2304'

  return `
  ${name}
    square: ${square}
    small: ${small}
    medium: ${medium}
    big: ${big}
    veryBig: ${veryBig}
  `
}

console.log(differentsPhotos('Juan'))
  Juan
    square: 75x75
    small: 240x180
    medium: 500x375
    big: 1024x768
    veryBig: 3072x2304

Es alucinante la Uni贸n de tipos!

Alias de tipos:

  • TS permite crear alias como nuevo nombre para un tipo
  • El alias se puede aplicar tambien a un conjunto o combinacion de tipos
  • Se usa la palabra reservada type
type IdUser = number | string;
type Username = string; 

En TypeScript escribimos:

let id: number | string;

en JavaScript se muestra:

let id;

Uni贸n de tipos
Permite el uso de uno o m谩s tipos. Para unir tipos, se usa el caracter |
Ejemplo:
let userId: string | number;

Alias
Sirven para definir un tipo de dato con nombre personalizado. Se usa la palabra reservada type
Ejemplo:
type userId = string | number;
let myUserId: userId;

Tipos literales
Permiten definir r谩pidamente una serie de elementos constantes, se pueden usar con strings, numbers o booleanos.
Ejemplo:
let tileSize: 8 | 16 | 32;
let squareSize: 鈥200x200鈥 | 鈥500x500鈥 | 鈥1000x1000鈥

<h3>Union de Tipos</h3>
  • En Ts se puede definir una variable con multiples datos usando Union Types

Sintaxis:

// 10, '10'
let idUser: number | string;
idUser = 10;
idUser = '10';
// Buscar username dado un ID
function getUsernameById(id: number | string) {
    // logica de negocio, find the user
    return 'luixaviles';
}

Para evitar redundancias en nuestro codigo (debido a la utilizacion de la misma convinacion de tipos de datos) podemos utilizar alias.

type IdUser = number | string;
let idUser: IdUser;
<h4>Tipos Literales</h4>
  • una variable definida con un tipo literal puede contener unicamente un valor de la cadena
// una variable definida con el nuevo tipo SquareSize solo acpetara alguno de
// estos 3 valores predefinidos
type SquareSize = '100x100' | '500x500' | '1000x1000';

Uni贸n de tipos, una variable con m煤ltiples tipos de datos, | entre los tipos.
Alias de tipado, type alias = nombre para un tipado.
Literales, es un tipado que contiene una coleci贸n de valores con | como separaci贸n. Se declara la variable, se le asiga este tipado y el valor ser谩 el alacenado en el tipado.

Genial!!!

Cool!

Me mato lo de Alias que genial una variable que soporta ciertos tipos que buena onda

Evoluci贸n de los tipos, que buena idea

Un caso de uso para uni贸n de tipos puede ser cuando necesitas recibir un valor que puede venir null

let username: string | null;
username = 'Syxtandev';
uername = null;

Esto puede ser 煤til cuando desconoces el resultado de el valor que te llega por ejemplo desde un formulario

Agregando ejemplo de enum y tipos literales con los size de flickr

enum FlickrSize {
  Square75 = "75x75",
  Square150 = "150x150",
  Thumbnail = "100x42",
  Small240 = "240x101",
  Small320 = "320x134",
  Small400 = "400x168",
  Medium500 = "500x210",
  Medium640 = "640x268",
  Medium800 = "800x336",
  Large1024 = "1024x430",
  Large1600 = "1600x671",
  Large2048 = "2048x859"
}

export { FlickrSize };

Unit test

import { FlickrSize } from "../src/FlickrSize";
describe("Unit test suite for Flickr size Enumerable", () => {
  test("Should get the large 1024 size", () => {
    let large1024: FlickrSize;
    const expectResult = "1024x430";

    large1024 = FlickrSize.Large1024;

    expect(large1024).toBe(expectResult);
  });
});
type LiteralFlickrSize =
  | "75x75"
  | "150x150"
  | "100x42"
  | "240x101"
  | "320x134"
  | "400x168"
  | "500x210"
  | "640x268"
  | "800x336"
  | "1024x430"
  | "1600x671"
  | "2048x859";

export { LiteralFlickrSize };

Unit test

import { LiteralFlickrSize } from "../src/LiteralFlickrSize";
import { FlickrSize } from "../src/FlickrSize";
describe("Unit test suite for Literal Flickr Size Enumerable", () => {
  test("Should get the large 1024 size", () => {
    let thumbnail: LiteralFlickrSize;
    const expectResult = "100x42";

    thumbnail = FlickrSize.Thumbnail;

    expect(thumbnail).toBe(expectResult);
  });
});

Repositorio

bastante nasty los de los alias amigo! 鉂

En este video encuentras tres definiciones relevantes:

  1. Uni贸n de tipos
  2. Alias
  3. Tipos Literales
    .
  1. Uni贸n de Tipos: significa que una variable podr谩 soportar m谩s de un solo tipo, eso todo.
    Ejemplo:
let miVariable : string | number;
miVariable = 5;
miVariable = 鈥20鈥;
  1. Alias: As铆 como en el lenguaje existen los tipos string, number, boolean, t煤 tambi茅n puedes crear tu propio tipo personalizado, usando la palabra reservada TYPE.
    Ejemplo:
type miNuevoTipo = number | string; // Este nuevo tipo soportar谩 n煤meros y strings. (O lo que t煤 decidas).
// Ahora usemos nuestro nuevo tipo:
let nombreDeVariable : miNuevoTipo;
nombreDeVariable = 5;
nombreDeVariable = 鈥20鈥;
  1. Tipos Literales: As铆 como las variables de tipo boolean solo aceptan dos posibles valores (true false), en TypeScript t煤 tambi茅n podr谩s crear tus propias variables que soporten 煤nicamente los valores que t煤 decidas previamente, y esto usando la palabra reservada TYPE.
    Ejemplo:
type Pais = 鈥淐hile鈥, 鈥淐olombia鈥, 鈥淎rgentina鈥;
let ubicacion : Pais;
ubicaci贸n = 鈥淐hile鈥;
ubicaci贸n = 鈥渁gua鈥; // error, porque 鈥渁gua鈥 no es un valor v谩lido para esta variable que es de tipo 鈥淧a铆s鈥.

FIN

el pipe | es un filtro o tuber铆a que tambi茅n se utiliza en sistemas Unix

Hola, tenia este problema: cuando compilaba mi archivo ts, por ejemplo type-union.ts, se generaba un nuevo archivo JS pero en la misma carpeta, ignorando la configuraci贸n previa en el archivo tsconfig.json, fue como si mi archivo tsconfig no indicar谩 la carpeta de destino.

"outDir": "./dist",

La soluci贸n que encontr茅 fue al compilar el archivo ts en la terminal le agregue --outDir + la ruta de destino de mi nuevo archivo js.

tsc .\src\type-union.ts --outDir ./dist

Si tienen el mismo problema, esto me funciono, si hay una soluci贸n m谩s favorable. me cuentan please.

Tipos Literales:

  • Una variable con un tipo literal puede contener unicamente una cadema del conjunto
  • Se usan cadenas como 鈥渢ipos鈥, combinados con el simbolo de pipe | entre ellos
// Tipos Literales
// 100x100, 500x500, 1000x1000
type SquareSize =  '100x100' | '500x500' | '1000x1000';
let smallPicture: SquareSize = '100x100';

Union de tipos:

  • Eb TS se puede definir una variable con multiples tipo de datos: Union Type
  • Se usa el simbolo de pipe ( | ) entre los tipos
let idUser: number | string;
idUser = 10;
idUser = "10";

// Buscar username dada un ID
function getUsernameById(id: number | string) {
  // Logica de negocio
  return "username";
}

getUsernameById(20);
getUsernameById("20");
type PhotoSizesType = '75x75' | '240x180' | '500x375' | '1024x768' | '3072x2304'

const large : PhotoSizesType = '500x375';

console.log(large);

Los alias son enum chiquitos

Change my mind

export {};

enum PicturesSizes {
  small = "75x75",
  medium = "240x180",
  large = "500x375",
  extraLarge = "1024x768",
  superLarge = "3072x2304",
}

type PhotoSizesType =
  | "75x75"
  | "240x180"
  | "500x375"
  | "1024x768"
  | "3072x2304";

const medium: PhotoSizesType = PicturesSizes.medium;
console.log(medium);

export {};
// 10, '10'
// let idUser: IdUser;
// idUser = 10;
// idUser = '10';

// // Buscar userName dado un ID
// function getUserNameById(id: number | string) {
// 	// logica de negocio, find the user
// 	return id;
// }

// getUserNameById(20);
// getUserNameById('20');

//alias de tipos: TS
type IdUser = number | string;
type UserName = string;
let idUser: IdUser;
idUser = 10;
idUser = '10';

// Buscar userName dado un ID
function getUserNameById(id: IdUser):UserName {
	// logica de negocio, find the user
	return 'Eru';
}

getUserNameById(20);
getUserNameById('20');

//Tipos literales
// 100x100, 500x500, 1000x1000
type SquareSize = '100x100' | '500x500' | '1000x1000';
//let smallPicture: SquareSize = '200x200' //Error
let smallPicture: SquareSize = '100x100';
let mediumPicture: SquareSize = '500x500';

type PhotoSize = '75x75' | '240x180' | '500x375' | '1024x768' | '3072x2304';
let squarePic: PhotoSize = '75x75';
let smallPic: PhotoSize = '240x180';
let mediumPic: PhotoSize = '500x375';
let largePic: PhotoSize = '1024x768';
let extraLargePic: PhotoSize = '3072x2304';
  • Uni贸n de Tipos
    Se puede definir variables con m煤ltiples tipos de datos.
    Se usa el s铆mbolo pipe ( | )
/********** Union Types */
let idUser: number | string;
idUser = 100;
idUser = '200';

function getUserById(id: number | string) {
    console.log(`Obteniendo el ID del usuario con uni贸n de tipos. El usuario es ${id}`);
}
getUserById(idUser);

.

  • Alias de Tipos
    TS permite crear un alias como nombre para un tipo.
    El alias se puede aplicar tambi茅n a un conjunto de datos o combinaci贸n de datos (Union types).
    la palabra reservada type es usada para definir un Alias.
    Nos ayudan para evitar la redundancia en la uni贸n de tipos.
/** Alias Types: Typescript */
type IdUser= number | string; /* Esto evita la redundacia ocurrida en las l铆neas 4 & 9, 
                               * al declarar idUser y el par谩metro que se env铆a a getUserById. 
                              */
type Username = string;

//////////// Redeclarando, las cosas ser铆an as铆 : 
let idOfUser: IdUser;
idOfUser = 'true'
function gettingUserById(id:IdUser): Username {
    console.log(`Obteniendo el usuario por ID con Alias. El usuario es: ${id}`)
}
gettingUserById(idOfUser);

.

  • Tipos literales
    Una variable con un tipo literal, puede contener una cadena del conjunto 煤nicamente.
    Permite crear tipos personalizados usando cadenas: podemos definir una variable que tenga un conjunto de valores definidos ( y estos llegar a ser strings 煤nicamente)
    Se usan las cadenas como 鈥渢ipos鈥 combinados con el s铆mbolo de pip ( | ) entre ellos.
/** Literal Types */
// Se define que las im谩genes para un app 
// solamente puden tener tama帽os de
// 100x100 | 500x500 | 1000x1000

type SquareSize = '100x100' | '500x500' | '1000x1000';

// let smallPictuare: SquareSize = '300x300'; // Error
let smallPictuare: SquareSize = '100x100';
let mediumPictuare: SquareSize = '500x500';
let HighPictuare: SquareSize = '1000x1000';

.

  • Reto

type PicturesSizes = '50x50' | '300x300' | '500x500' | '1024x1024' | '3000x3000';
enum PicturesRelations {
    small = '75x75',
    medium = '240x180',
    large = '500x375',
    extraLarge = '1024x768',
    superLarge = '3072x2304'
};

/** SQUARE PICTUARES SIZES*/
const smallSquarePic: PicturesSizes = '50x50';
const mediumSquarePic: PicturesSizes = '300x300';
const largeSquarePic: PicturesSizes = '500x500';
const extraLargeSquarePic: PicturesSizes = '1024x1024';
const superLargeSquarePic: PicturesSizes = '3000x3000';

/** STANDARD PICTURES SIZES */
const smallPicture: PicturesRelations = PicturesRelations['small'];
const mediumPicture: PicturesRelations = PicturesRelations['medium'];
const largePicture: PicturesRelations = PicturesRelations['large'];
const extraLargePicture: PicturesRelations = PicturesRelations['extraLarge'];
const superLargePicture: PicturesRelations = PicturesRelations['superLarge'];

console.log(PicturesRelations);
// Recuerden que PicturesSizes es un *tipo* y solo un *tipo*

Las Uniones de typos son usadas en Typescript para declarar una variable que puede almacenar un valor de dos o mas tipos.

var path : string[]|string;
path = '/temp/log.xml';
path = ['/temp/log.xml', '/temp/errors.xml'];
path = 1; // Error```

En este ejemplo. hemos declarado una variable llamada path, que puede contener un arreglo de strings o tan solo un string. Luego hemos asignado estos valores sin ning煤n problema, excepto cuando asignamos un numero. En este caso el numero causa un error porque no coincide con ninguno de los tipos de datos declarados.

Tipos literales vs Enums 馃

Los tipos literales me recuerdan mucho a los enum y se me hacen m谩s ordenados

.

RETO

enum resolution_enum{
    extra_small='75x75',
    small='240x180',
    medium='500x375',
    large='1024x768',
    extra_large='3072x2304'
}
console.log("RESOLUTION USING ENUM");
console.log(resolution_enum);

function resolutionTypeShow(){
 type resolution_type='75x75'|'240x180'|'500x375'|'1024x768'|'3072x2304';
let extra_small:resolution_type="75x75";
let small:resolution_type="240x180";
let medium:resolution_type="500x375";
let large:resolution_type="1024x768";
let extra_large:resolution_type="3072x2304";   

return `extra small: ${extra_small}
        small: ${small}
        medium: ${medium}
        large: ${large}
        extra large: ${extra_large}
`
}
console.log("RESOLUTION USING TYPE");
console.log(resolutionTypeShow());


MY NOTES UNION THE TYPES, ALIAS, LITERAL TYPES 馃槃

  • En Typescript se pueden definir una variable con m煤ltiples tipos de datos: Uni贸n Type
  • Se usa el s铆mbolo de pipe(鈥檤鈥) entre los tipos
export {}
//Utilizando | podremos inicializar una variable con varios tipos de datos.
let idUser: number | string;
idUser = 10;
idUser = '10';

// Buscar username dado un ID
  //Podremos tambien indicar el tipo de dato que tiene el parametro con varios 
    //Utilizando |
function getUsernameById(id:number|string){
  //Logica de negocio y encontrar el usuario

  return 'luixaviles';

}
//Podremos invocar la variable con cualquiera de los tipos de datos que definimos
  //En sus parametros
getUsernameById(20);
getUsernameById('20');

Alias de Tipos

  • Typescript permite crear un alias como nuevo nombre para un tipo
  • El alias se puede aplicar tambi茅n a un conjunto de elementos
  • Se usa la palabra reservada type
//Alias de tipo en ts
  //Los alias en ts nos ayudan a evitar redundancia en la union de tipos
    //Utilizamos la plabra reservada type y dentro de ella definimos los
      //Tipos de datos que utilizaremos 
        //Es como definir los tipos de datos en una variable

type IdUser = number | string;
let idUser: IdUser;
idUser = 10;
idUser = '10';

function getUsernameById(id:IdUser){
  

  return 'luixaviles';

}

getUsernameById('20');

Tipos Literales

  • Una variable con un tipo literal puede contener 煤nicamente una cadena del conjunto
  • Se usan cadenas como 鈥渢ipos鈥, combinados con el s铆mbolo de pipe | entre ellos
export {}
//Utilizando | podremos inicializar una variable con varios tipos de datos.
/*let idUser: number | string;
idUser = 10;
idUser = '10';

// Buscar username dado un ID
  //Podremos tambien indicar el tipo de dato que tiene el parametro con varios 
    //Utilizando |
function getUsernameById(id:number|string){
  //Logica de negocio y encontrar el usuario

  return 'luixaviles';

}
//Podremos invocar la variable con cualquiera de los tipos de datos que definimos
  //En sus parametros
getUsernameById(20);
getUsernameById('20'); */

//Alias de tipo en ts
  //Los alias en ts nos ayudan a evitar redundancia en la union de tipos
    //Utilizamos la plabra reservada type y dentro de ella definimos los
      //Tipos de datos que utilizaremos 
        //Es como definir los tipos de datos en una variable

type IdUser = number | string;
let idUser: IdUser;
idUser = 10;
idUser = '10';

function getUsernameById(id:IdUser){
  

  return 'luixaviles';

}

getUsernameById('20');

//Tipos Literales 
//100 x 100, 500 x 500, 1000x1000

type SquareSize = '100x100' | '500x500' | '1000x1000';
//let smallPicture: SquareSize = '200x200' Error
let smallPicture: SquareSize = '100x100';
let mediumPicture: SquareSize = '500x500';

good