Unión de Tipos, Alias y Tipos Literales

David Vargas Domínguez

student•

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

Hildegar Medina

student•

En ese caso en vez de definir dos tipos con la misma condición, sería interesante englobarlas en una sola:

type Time = number | string;

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

Boris Vargas Paucara

student•

/* 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'; // --&gt; Error
let smallPicture: SquareSize = '100x100';
let mediumPicture: SquareSize = '500x500';

Jesus Federico David Herrera

student•

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';```

Andrés Felipe Eslava Zuluaga

student•

Gracias... Tú código me ayudo a comprender que enum puede tomar esos valores. Pensaba que por ser una enumeración, solo servía para números. También me copié de los valores de resolución = )

Sebastian SS

student•

Excelente muestras como darle solución al reto con enum y literal types. Buen ejercicio

Johan Garzon

student•

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.

Jose Daniel Barría Reyes

student•

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.

Miguel Angel Reyes Moreno

student•

Unión de Tipos, Alias y Tipos Literales

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

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 combinación de tipos
Se usa la palabra reservada type

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

//* 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)

Julian Carelli

student•

Reto completado ;D

Moisés Manuel Morín Hevia

student•

Qué bien ! Eres increíble !

Nicolas David Pastran Zamora

student•

¿ Es posible definir los tipos literales usando expresiones regulares ?

Jorge Cruz Perez

student•

Interesante la pregunta, pero al menos por como la uso para definir laos tamaños de un cuadrado, no veo la relación, ya que en square definir tipos predefinidos, y con una regex englobas valores, no se si me explique, a menos que detalles un ejemplo de como quieres usarlas, saludos :)

Leonardo de los angeles Espinoza Hernandez

student•

Por convención se usa UpperCamelCase cuando se declaran Alias?

Enrique Tecayehuatl

student•

También es conocido como PascalCase, y se usa especialmente cuando declaras el nombre de clases, interfaces, etc.

Leonardo de los angeles Espinoza Hernandez

student•

Entiendo, muchas gracias @kikekeys :D

Juan David González Rodríguez

student•


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

Raphael Martinez

student•

Puede ser similar usar un enum a un tipo literal ?

David Prieto Cornejo

student•

En realidad, nada te lo impide. Incluso, en el caso del ejemplo, las medidas de las fotos pueden ser entendidas como constantes y a mi gusto sería más legible.

enum PicturesSize {
   SMALL = '100x100',
   MEDIUM = '500x500',
   LARGE = '1000x1000'
}

let newPictureSize: PicturesSize = PicturesSize.SMALL;

Moisés Manuel Morín Hevia

student•

Sí es similar pero si quieres cambiar el tipado es mejor hacerlo de esta forma (: Todo es con base a las necesidades de tu proyecto.

Guillermo Castaño Vèlez

student•

He visto que el profesor siempre para definir una función usa la palabra reservada function. En ts no podemos usar arrow functions?

Carlos Eduardo Gomez García

teacher•

Sí se puede 👇

https://www.tutorialsteacher.com/typescript/arrow-function

Tal vez solo no quiere usar las Arrow Functions 👀

Gustavo Restrepo

student•

Sí se puede, basicamente Typescript es Javascript pero con tipado. (Para mí)

Albert González Rossell

student•

Es alucinante la Unión de tipos!

Gustavo Adolfo Perez Ramos

student•

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;

Jimmy Buriticá Londoño

student•

En TypeScript escribimos:

let id: number | string;

en JavaScript se muestra:

let id;

Kevin Urgilés

student•

++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'

Luis Alejandro Vera Hernandez

student•

Consiso el resumen

Federico Walovnik

student•

Union de Tipos

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;

Tipos Literales

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

Moisés Manuel Morín Hevia

student•

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.

Nikolas Santis

student•

Genial!!!

Moisés Manuel Morín Hevia

student•

eres ...

Albert Eduardo Hidalgo Tavera

student•

Cool!

Moisés Manuel Morín Hevia

student•

Eres...