Enum

Buscando algún ejemplo más sobre unir o extender en enum, he encontrado esta:

enum DiasLaborales {
  Lunes = 'MON',
  Martes = 'TUE',
  Miercoles = 'WED',
  Jueves = 'THU',
  Viernes = 'FRI'
}

enum DiasFinSemana {
  Sabado = 'SAT',
  Domingo = 'SUN'
}

const Semana = {
  ...DiasLaborales,
  ...DiasFinSemana
}

console.log(Semana.Lunes); // MON
console.log(Semana.Sabado); // SAT

La manera de extender un enum en TypeScript es simplemente asignando nuevos valores al enum que queremos extender, es decir:

enum Color {
    Red,
    Green,
    Blue
}

enum Color {
    DarkRed = 3,
    DarkGreen,
    DarkBlue
}

Tomando en cuenta que es necesario reinicializar el primer elemento del segundo enum en continuación del primero.
.
Esto se puede lograr ya que una vez compilado nuestro código a JavaScript un enum no deja de ser un objeto literal, es por eso que se pueden asignar nuevos valores.
.
Fuente:
Enums are open ended - TypeScript Deep Dive
Number Enums and Strings - TypeScript Deep Dive

// Enum: permiten definir un conjunto de constantes con nombre

// Orientacion para Fotografias
// const landscape = 0;
// const portrait = 1;
// const square = 2;
// const panorama = 3;

enum PhotoOrientation {
    Landscape = 0, // podemos darle valor de manera explicita
    Portrait,   // 1
    Square,     // 2
    Panorama    // 3
}

const landscape: PhotoOrientation = PhotoOrientation.Landscape;

console.log('landscape : ', landscape); // -> 0
console.log('Landscape : ', PhotoOrientation[0]); // -> Landscape

enum PictureOrientation {
    Landscape = 10, // 10
    Portrait,   // 11
    Square,     // 12
    Panorama    // 13
}
console.log('porttrait : ', PictureOrientation.Portrait); // -> 11

enum Country {
    Bolivia = 'bol',
    Colombia = 'col',
    Mexico = 'mex',
    EEUU = 'usa',
    España = 'esp'
}
const country: Country = Country.Colombia;
console.log('country : ', country); // --> col

Para unir o extender un enum de otro es de la siguiente manera.

enum FirstEnum {
    value1 = 'value1',
    value2 = 'value2'
}

enum SecondEnum {
    value3 = 'value3',
    value4 = 'value4'
}

let testEnum = Object.assign({}, FirstEnum, SecondEnum);

console.log(testEnum.value4) // value 4

Así testEnum tiene los valores de los dos anteriores Enum ya que en runtime se pueden combinar estos dos objetos. En Javascript se traduciría de la siguiente forma.

"use strict";
var FirstEnum;
(function (FirstEnum) {
    FirstEnum["value1"] = "value1";
    FirstEnum["value2"] = "value2";
})(FirstEnum || (FirstEnum = {}));
var SecondEnum;
(function (SecondEnum) {
    SecondEnum["value3"] = "value3";
    SecondEnum["value4"] = "value4";
})(SecondEnum || (SecondEnum = {}));
let testEnum = Object.assign({}, FirstEnum, SecondEnum);
console.log(testEnum.value4); // value 4

• Los enumerados permiten definir un conjunto de constantes con nombre
• Tienen la ventaja de adapartse al contexto de la aplicación

Documentación oficial de enums en TS

//* Orientación para fotografías
/* const landscape = 0
const portrait = 1
const square = 2
const panorama = 3 */

//*Una forma más inteligente de declarar constantes
enum PhotoOrientation {
  Landscape = 'cero', //* Podemos asignar un valor en particular
  Portrait = 1, //* 1
  Square = 2, //* 2
  Panorama = 3 //* 3
}

const landscape: PhotoOrientation = PhotoOrientation.Landscape
const square: PhotoOrientation = PhotoOrientation.Square

console.log('landscape: ', landscape) //* Accede al valor
console.log('Square: ', PhotoOrientation[square]) //* Accede al nombre

//*Siempre tenemos valores consecutivos que incrementan de 1 en 1
enum PictureOrientation {
  Landscape = 10,
  Portrait, //* 11
  Square, //* 12
  Panorama,// *13
}

console.log('Portrait: ', PictureOrientation.Portrait) //* valor 11

//* Es la misma lógica que: { key, value }
enum Country {
  Bolivia = 'BOL',
  Colombia = 'COL',
  Mexico = 'MEX',
  EEUU = 'USA',
  Espana = 'ESP'
}

const mexico:Country = Country.Mexico
console.log('México: ', mexico)

//! Country.Mexico = 'MX' //!Esto da un error, no podemos modificar su valor

Una recomendacion es que los enums por lo general van en mayusculas, dado que son constantes.

en la practica es como un objeto clave-valor.

Los Enum nos ayudan a escribir un código más legible.

Prácticamente esto es un Objeto que tiene como key los textos que declaramos y los indices que se autodefinen o definimos , ya que la salida de todo eso es

{
    0: "Landscape",
    1: "Portrair",
    2: "Square",
    3: "Panorama",
    Landscape: 0,
    Panorama: 3,
    Portrair: 1,
    Square: 2,
}

Los enum en Typescript funcionan igual que en swift, si declaras:

enum PhotoOrientation {
    Landscape = 2,
    Portrait,
    Square,
    Pano
}

Obtienes como resultado:

{
  '2': 'Landscape',
  '3': 'Portrait',
  '4': 'Square',
  '5': 'Pano',
  Landscape: 2,
  Portrait: 3,
  Square: 4,
  Pano: 5
}

es decir, si inicializas con un valor “custom” el primer enumerado los demas se “enumeran” a partir de ese valor que se le asigna

en enum generalmente no sabemos los valores numéricos asociados, por lo tanto si queremos saber el nombre que representa, entonces lo haríamos así, sin saber el número asociado:

console.log(‘Landscape’,PhotoOrientacion[PhotoOrientacion.Landscape);

Enum, conjunto de constantes con nombre. Es darle a una variable un nombre con un valor numérico. Con un índice se ve el estado del enumerado. Se pueden personalizar los índices asignandoles un valor.

Si presentas el siguiente problema:

“SyntaxError: Unexpected reserved word on typescript”

al momento de ejecutar tu archivo type-enum.js con node, instala lo siguiente:

npm i -g ts-node

y para compilar tu archivo .ts y ejecutarlo a la vez solo necesitas ejecutar el comando junto con su archivo de TypeScript:

ts-node type-enum.ts

Ello te permitirá ejecutar directamente tu archivo .ts sin tener que llamar a node de forma manual y así evitar el error que te está apareciendo.

Fuente:

https://stackoverflow.com/questions/63635409/syntaxerror-unexpected-reserved-word-on-typescript

Solución al reto:

// Extends Enums

enum PrimaryColors  {
    Red = 'Red',
    Yellow = 'Yellow',
    Blue = 'Blue'
}

enum SecondaryColors {
    Orange = 'Orange',
    Green = 'Green',
    Violet = 'Violet'
}

type AllColors = PrimaryColors | SecondaryColors;

const colorRed: AllColors = PrimaryColors.Red;
const colorOrange: AllColors = SecondaryColors.Orange;

Enum

• Los enumerados permiten definir un conjunto de constantes con nombre
• Tiene la ventaja de adaptarse al contexto de la aplicación

enum PhotoOrientation {
  Landscape = "Landscape",
  Portrait = "Portrait",
  Square = "Square",
  Panorama = "Panorama",
}
const landscape: PhotoOrientation = PhotoOrientation.Landscape;

console.log(landscape);
// console.log(PhotoOrientation[landscape]);

Ejemplo típico de los meses:

enum Months {
  January = 'Enero',
  February = 'Febrero',
  March = 'Marzo',
  April = 'Abril',
  May = 'Mayo',
  June = 'Junio',
  July = 'Julio',
  August = 'Agosto',
  September = 'Septiembre',
  October = 'Octubre',
  November = 'Noviembre',
  December = 'Diciembre'
}

const firstMonth: Months = Months.January;
console.log('Mes:', firstMonth);
console.log('Mes:', Months.December);

Salida:

Mes: Enero
Mes: Diciembre

Noté que cuando asignas un valor de tipo distinto a numero a los atributos de enum ya no puedes acceder a ellos con corchetes [] como lo que hizo el profesor al principio en la parte de:

enum PhotoOrientation {
	Landsacape,
	...
}
console.log(PhotoOrientation[0])

Es decir cuando trato de hacerlo con:

enum PhotoOrientation {
	Landsacape = 'Un string',
	...
}
console.log(PhotoOrientation[0]) //Marca error de tipos

Esto genera un error, alguien me podría explicar por qué es así por favor 🙏🏼

Algo a tener en cuenta es que si no colocas un identificador o llave para los elementos del enum se pueden duplicar cuando les hagas merge.

enum WorkDays {
    Monday = 1,
    Tuesday = 2,
    Wednesday = 3,
    Thursday = 4,
    Frida = 5,
}

enum WeekendDays {
    Saturday = 6,
    Sunday = 7,
}

const Week = {
    ...WorkDays,
    ...WeekendDays
}

console.log(Week)

Se escribe demasiado.

Object.assign({}, firstEnum, secondEnum)

enum pictureOrientation {
    Landscape = 10,
    Portrait,
}

enum pictureOrientation {
    Square = 20,
    Panorama,
}

console.log("Square", pictureOrientation.Square)
console.log("pictureOrientation", pictureOrientation)

Estuve jugando un poco e hice esto:

enum ColoresPrimarios {
  Red = 'Red',
  Green = 'Green',
  Blue = 'Blue'
}

enum CombinacionColores {
  Black = 0,
  Brown = ColoresPrimarios.Red + ColoresPrimarios.Green,
  Yellow = ColoresPrimarios.Green + ColoresPrimarios.Blue,
  Purple = ColoresPrimarios.Red + ColoresPrimarios.Blue,
  White = ColoresPrimarios.Red + ColoresPrimarios.Green + ColoresPrimarios.Blue,
}

console.log('Colores Primarios: ', ColoresPrimarios)
console.log('Combinación de Colores: ', CombinacionColores)
console.log('Red: ', ColoresPrimarios.Red)
console.log('Green: ', ColoresPrimarios.Green)
console.log('Blue: ', ColoresPrimarios.Blue)
console.log('Brown: ', CombinacionColores.Brown)
console.log('Yellow: ', CombinacionColores.Yellow)
console.log('Purple: ', CombinacionColores.Purple)
console.log('White: ', CombinacionColores.White)

resultado:
Colores Primarios: { Red: ‘Red’, Green: ‘Green’, Blue: ‘Blue’ }
Combinación de Colores: {
‘0’: ‘Black’,
Black: 0,
Brown: ‘RedGreen’,
Yellow: ‘GreenBlue’,
Purple: ‘RedBlue’,
White: ‘RedGreenBlue’
}
Red: Red
Green: Green
Blue: Blue
Brown: RedGreen
Yellow: GreenBlue
Purple: RedBlue
White: RedGreenBlue

Si ponemos números, los va a sumar, si ponemos strings, los va a concatenar

¿podría ayudar el uso de uniones?

enum State 
{
    State1,
    State2
}

enum AnotherState
{
     State1,
     State2,
     State3,
     State4
}

const x: State | AnotherState = State.State1;

const y: State | AnotherState = AnotherState.State3;```

Los enum se podria decir que son una lista de valores. Las variables que tengan definido como tipo un enum solo podran asignarsele valores que esten dentro del enum.

Enum: Permiten definir un conjunto de constantes con nombre.
Tienen la ventaja de adaptarse al contexto de la aplicacion.

// crear
enum PhotoOrientation {
	Landscape,
	Portrait,
	Square,
	Panorama
}
// utilizar
const landscape: PhotoOrientation = PhotoOrientation.Landscape

En el fondo son arreglo, por lo que pueden accederse vía indices.
Podemos definir tambien los valores para las claves.

enum Country{
	Bolivia = 'bol'
	Colombia = 'col'
}

Un caso de uso para los enums es utilizarlos como bandares, esto nos permitira utilizarlo para validar algun posible conjunto de condicionales en nuestro desarrollo.
.
Fuente: Enums - TypeScript Deep Dive

console.clear();

// Orientacion para Fotografias

const landscape = 0;
const portrait = 1;
const square = 2;
const panorama = 3;

enum PhotoOrientation {
  Landscape,
  Portrait,
  Square,
  Panorama,
}

enum FelType {
    Invoice = 'Invoice',
    SpecialInvoice = 'SpecialInvoice'
}

const photo: PhotoOrientation = PhotoOrientation.Landscape;
console.log('photo:',photo);

let invoice : FelType;
invoice = FelType.SpecialInvoice;

console.log('invoice type:',invoice);

Así lo haría yo:

enum PaisesAmerica {
	Colombia = 'COL',
	Mexico = 'MXN',
	Argentina = 'ARG',
}

enum Europa {
	España = 'ESP',
	Alemania = 'ALM',
	Italia = 'ITA',
}

const Fusion = {
    ...PaisesAmerica,
    ...Europa
}

console.log(Fusion);

// Los enumerados permiten definir un conjunto de constantes con nombres reconocibles
// Orientacion para Fotografías
// const landscape = 0;
// const portrait = 1;
// const square = 2;
// const panomara = 3;

enum PhotoOrientation {
    Landscape = 0, // 0   // asignación explícita
    Portrait = 1, // 1
    Square = 2, // 2
    Panorama = 3 // 3
}

const landscape: PhotoOrientation = PhotoOrientation.Landscape;
console.log('Landscape', landscape);
console.log('Landscape', PhotoOrientation[landscape]);

enum PictureOrientation {
    Landscape = 10, // 10   //inicializar la asignación
    Portrait, // 11
    Square, // 12
    Panorama // 13
}
console.log('Portrait: ', PictureOrientation.Portrait);
console.log('Panorama: ', PictureOrientation.Panorama);

enum Country {
    Bolivia = 'bol',
    Colombia = 'col',
    Mexico = 'mex',
    EEUU = 'usa',
    España = 'esp'
}

const country: Country = Country.España;
console.log('Country: ', country);```

Genial

enum Country {
  Bolivia = 'bol',
  Colombia = 'col',
  Mexico = 'mex',
  EEUU = 'usa',
  España = 'esp'
}

enum CountryExtended {
  Argentina= 'Arg',
  Brasil= 'Bra'
}

// Based in es6, you have to config that value in the tsconfig.json

let joinedEnums = Object.assign({}, Country, CountryExtended);
console.log('Joined Enums', joinedEnums);

// Sprinte operator

let joinedEnumsSprite = { ...Country, ...CountryExtended };
console.log('Joined Enums Sprite', joinedEnumsSprite);

.

MY NOTES ENUM

• Los enumeraos permiten definir un conjunto de constantes con nombre
• Tiene la ventaja de adaptarse al contexto de la aplicación

//Enum
  //Orientacion de fotografias

//const Landscape = 0;
//const portrait = 1;
//const square = 2;
//const panorama = 3;

//En typescript podremos definir estos valores como si fueran un nuevo tipo

enum PhotoOrientation{
  Landscape = 0, //0
  Portrait = 1, //1
  Square = 2, //2
  Panorama = 3, //3

}

const landscape: PhotoOrientation = PhotoOrientation.Landscape;
console.log(landscape);
console.log(PhotoOrientation[0]); //accedemos al atributo del objeto
console.log(PhotoOrientation[landscape]); //podremos acceder incluso con la misma variable

//si inicializaramos el primer valor con 10 los siguientes aumentarian en 1
  //Siempre son valores consecutivos y que se van incrementando de uno en uno
enum PictureOrientation{
  Landscape = 10, //10
  Portrait,  //11
  Square,  //12
  Panorama //13

}

console.log('portrait', PictureOrientation.Portrait); //11

//Existe otra forma de personalizar los enum en typescript

enum Country{
  Bolivia = "BOL",
  Colombia = "COL",
  Mexico = "MEX",
  EEUU = "usa",
  Espana = "esp"

}

const country:Country = Country.Colombia;
console.log('country', country);

Para tener en cuenta:

.

Lo que se ingresa dentro de los [ ] no son índices, sino los valores de las constantes dentro del enum y solo aplica para tipos numéricos.

.

En el caso de PhotoOrientation, si no le asignas un valor a la LANDSCAPE (que por cierto la constante se ha de escribir en mayúscula) esta por defecto adquiere el valor de 0 y las demás constantes se incrementan en 1. Así, si la primera constante la inicias en 7, las siguientes adquieren el valor de 8, 9, 10, etc.

.

Entonces, al invocar PhotoOrientation[0] lo que estas haciendo es consultar dentro del enum una constante cuya asignación o valor sea 0 y esta consulta retornara el nombre de la constante.

.

Igualmente, al invocar PhotoOrientation.LANDSCAPE la consulta retornara la asignación o valor de una constante con el nombre de LANDSCAPE y que sin asignación por defecto seria 0.

• Enum : Una enumeración es la forma de organizar una colección de datos relacionados entre sí.

enum Movement {	
    UP = 1,	
    DOWN = 2,	
    LEFT = 3, 	
    RIGHT = 4,	
}

const sendMovement = function( movement: number ) {	
    console.log(movement);
}	
sendMovement(Movement.UP);
sendMovement(Movement.RIGHT);
sendMovement(Movement.DOWN);
sendMovement(Movement.LEFT);

Se podria emplear con paleta de colores y sus hexadecimal