Unión de Tipos, Alias y Tipos Literales

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 true ó false, 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 ‘tipos’, 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

• 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

• 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

• Una variable con un tipo literal puede contener únicamente una cadena del conjunto
• Se usan cadenas como “tipos”, 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’

• 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;

• 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 = “Chile”, “Colombia”, “Argentina”;
let ubicacion : Pais;
ubicación = “Chile”;
ubicación = “agua”; // error, porque “agua” no es un valor válido para esta variable que es de tipo “Paí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 “tipos”, 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 “tipos” 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 “tipos”, 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