No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Enums

4/22
Recursos

Un enum es un tipo de dato que nos permite crear un set de opciones. Estas opciones son almacenadas bajo una estructura llave-valor similar a un objeto.

Enums en TypeScript

Veamos algunos aspectos de los enums en TypeScript:

  • Los declaramos usando la palabra reservada enum seguido del nombre que tendr谩 este.
  • Entre llaves estar谩n los datos llave-valor.
  • Se recomienda que el nombre del enum y de las llaves dentro del mismo est茅n en may煤scula:
// ENUM
enum ROLES {
	ADMIN = "admin",
	SELLER = "seller",
	CUSTOMER = "customer",
}

// TIPO DE DATO USER
type User = {
	username: string;
	role: ROLES;
}

// CONSTANTE
const nicoUser: User = { // `nicoUser` es del tipo de dato User
	username: 'nicobytes',
	role: ROLES.ADMIN // Le asignamos el rol ADMIN que es uno de los 3 roles disponibles
}

La ventaja que nos da esto es que disponemos de una lista de valores predeterminados que podemos asignar a una variable o a un atributo de la misma. Por tanto, no podemos asignar otro valor que no este dentro de las opciones que nos brinde el enum:
Los posibles valores que puede tomar el atributo role (ADMIN, SELLER o CUSTOMER) en la constante nicoUser

Analizando una librer铆a con enums

Capacitor es una librer铆a que nos ayuda a implementar aplicaciones multiplataformas. Realizaremos un peque帽o an谩lisis aparte de su c贸digo para observar c贸mo hacen empleo de los enums y c贸mo estos nos pueden ayudar en nuestros proyectos.

Podemos realizar la instalaci贸n con el siguiente comando:

npm install @capacitor/camera

Ahora veamos el siguiente c贸digo que podemos implementar con dicha librer铆a:

import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
};

Observamos que CameraResultType es un enum que restringe al atributo resultType a tener un valor dentro de las opciones del enum. En este caso, dicho atributo recibe el valor de la llave Uri del enum.

En conclusi贸n, un enum nos ayuda a no equivocarnos cuando asignemos valores a una variable reduciendo las posibilidades de asignaci贸n a una lista de opciones predefinidas.

Com茅ntanos: 驴Qu茅 casos de uso encontrar铆as ideal utilizar los enums?

Contribuci贸n creada por: Mart铆n 脕lvarez (Platzi Contributor).

Aportes 24

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Diferencias entre enum y literal types:
Investigando un poco entre algunas diferencias que me gustar铆a compartirles:

  • ** Asignaci贸n de valores, por ejemplo los par谩metros de una funci贸n:**
enum Estaciones {
  primavera = "Primavera",
  verano = "Verano",
  otonio = "Oto帽o",
  invierno = "Invierno",
}

const favEstacion = (est: Estaciones): string => {
  return `Mi estaci贸n fav es: ${est}`;
};
console.log(favEstacion("verano")); //鉂 no se puede mandar un string suelto
console.log(favEstacion(Estaciones.verano)); //鉁卼enemos que ser mas especificos

Con un enum tenemos que ser mas espec铆ficos al momento de llamar a sus valores, no podemos acceder a ellos como si fuera una simple cadena.

Mientras que con un literal type esto es mucho mas sencillo:

type Estaciones = "Primavera" | "Verano" | "Oto帽o" | "Invierno";

const favEstacion = (est: Estaciones): string => {
  return `Mi estaci贸n fav es: ${est}`;
};
console.log(favEstacion("Primavera")); // 鉁 Podemos usar los argumentos como si fuera js nativo
  • **C贸digo compilado: **
    Con literal types el c贸digo compilado es mas sencillo:
"use strict";
const favEstacion = (est) => {
    return `Mi estaci贸n fav es: ${est}`;
};
console.log(favEstacion("Primavera")); // 鉁 Podemos usar los argumentos como si fuera js nativo

Mientras que con enums el c贸digo resultante es mas complejo y verboso:

"use strict";
var Estaciones;
(function (Estaciones) {
    Estaciones["primavera"] = "Primavera";
    Estaciones["verano"] = "Verano";
    Estaciones["otonio"] = "Oto\u00F1o";
    Estaciones["invierno"] = "Invierno";
})(Estaciones || (Estaciones = {}));
const favEstacion = (est) => {
    return `Mi estaci贸n fav es: ${est}`;
};
console.log(favEstacion(Estaciones.primavera)); // 鉁 Podemos usar los argumentos como si fuera js nativo

Enums

Los enums funcionan como listas en las que podemos agregar llaves y valores. Esto lo que nos permite es tener un set de opciones predefinidas, evitando pasar un argumento invalido, ya que solo vamos a tener las opciones dentro del enum. Estos se usan de la siguiente manera

enum ROLES {
  ADMIN = "admin",
  USER = "user",
  OWNER = "owner"
}

Se recomiendo nombrar al enum en may煤scula.

馃槃 Hola! Lei algo super importante en la documentacion que se que nos va a servir a todos!
Hay Enums numericos y String-based. Los String-based son los que explico el profe pero los numericos tienen algunas cosas que considero importante que lean ya que estos pueden ser inizializados o no. Si no se inicializan El primer valor siempre toma el valor num茅rico de 0, mientras que los dem谩s valores de la enumeraci贸n se incrementan en 1. Pero si se inicializan incrementan segun el numero que se haya puesto. Para que tengan mas contexto sobre el tema dejo estos dos links que explican muy bien como se manejan los enums:
https://www.typescriptlang.org/docs/handbook/enums.html
https://www.tutorialsteacher.com/typescript/typescript-enum

Personalmente he usado los enums como una alternativa a crear un archivo constants.js.

En este caso en particular lo us茅 para los action types de Redux.

enum SearchActionTypes {
  SET_RECOVER_PRODUCTS = 'SEARCH/SET_RECOVER_PRODUCTS',
  SET_LOADING = 'SEARCH/SET_LOADING',
  SET_ALGOLIA_MARKETPLACE = 'SEARCH/SET_ALGOLIA_MARKETPLACE',
  SET_ALGOLIA_STORE = 'SEARCH/SET_ALGOLIA_STORE',
} 

Un uso para los enums que he visto que usan algunos 鈥測outubeDevs鈥 es para el uso de condicionales switch y evitar typos en los 鈥渃ases鈥 y, su consecuente asignaci贸n a la variable a evaluar.

Otras caracter铆sticas de enum

Si en un enum las keys solo se declaran y no se inicializan con valores, estas se inician autom谩ticamente por defecto en orden n煤merico, empezando por el 0 y auto incrementandose.


enum ENUM_NUMBER {
  X,Y,Z
}

console.log(ENUM_NUMBER.X) // 0
console.log(ENUM_NUMBER.Y) // 1
console.log(ENUM_NUMBER.Z) // 2


Tambi茅n es posible inicializar manualmente una key y sus atributos se incrementaran a partir de este valor

enum ENUM_NUMBER {
  X = 1,
  Y,
  Z
}

console.log(ENUM_NUMBER.X) // 1
console.log(ENUM_NUMBER.Y) // 2
console.log(ENUM_NUMBER.Z) // 3

Recomiendo la documentaci贸n por si tienen dudas sobre enums. Adem谩s, dentro de la documentaci贸n se menciona sobre enums de tipo string y number, adem谩s, de que no recomienda mezclarlos dentro de un enum.

alias ts= touch $*{.ts}

ts 01-enum

asi que esto son los enums, no lo sabia y lo vi muchas veces cuando tenia error en algun programa y aparecia algo similar a enums con mayusculas. Y si no me equivoco configurando algunas extensiones de vscode

茅ste profe es excelente 鈥

Probablemente no sea tan buena idea usar enums, ya que no se comportan como objetos una vez convertido a JavaScript, al menos no siempre 馃槄
Aqu铆 un video de lo que digo, mucho mejor explicado a detalle:
https://www.youtube.com/watch?v=jjMbPt_H3RQ

El c贸digo necesario para el archivo 01-camera.ts

import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  })
}

Lo que me dijo ChatGPT:

En TypeScript, un enum es una estructura de datos que permite definir un conjunto de constantes con nombre. Un enum es una forma de crear un tipo de dato personalizado, que contiene un conjunto de valores que pueden ser utilizados en lugar de n煤meros o cadenas de caracteres.

Para definir un enum en TypeScript, se utiliza la palabra clave enum, seguida del nombre del enum y una lista de valores separados por comas. Por ejemplo:

enum Direccion {   
    Arriba = "ARRIBA",   
    bajo = "ABAJO",   
    Izquierda = "IZQUIERDA",   
    Derecha = "DERECHA" 
}

En este ejemplo, hemos definido un enum llamado Direccion que contiene cuatro valores: Arriba, Abajo, Izquierda y Derecha. Cada valor est谩 asociado con una cadena de caracteres que representa su nombre.

Los enums en TypeScript tambi茅n tienen la opci贸n de asignar valores num茅ricos autom谩ticamente a cada valor en el enum. Por defecto, el primer valor en el enum se establece en 0 y los siguientes valores se incrementan en 1, pero es posible cambiar este comportamiento utilizando el operador = para asignar valores num茅ricos espec铆ficos a cada elemento. Por ejemplo:

enum DiaSemana {
   Lunes,
   Martes,
   Miercoles = 10,
   Jueves,
   Viernes 
}

En este ejemplo, el enum DiaSemana tiene cinco valores, siendo el segundo (Martes) el n煤mero 1 y el cuarto (Jueves) el n煤mero 11.

Una vez definido un enum, se pueden utilizar sus valores en cualquier parte del c贸digo donde se necesite utilizar una constante con nombre. Por ejemplo:

let direccionActual: Direccion = Direccion.Arriba; 

if (direccionActual === Direccion.Abajo) {
   // hacer algo 
}

En este ejemplo, se declara una variable direccionActual de tipo Direccion y se le asigna el valor Direccion.Arriba. Luego, se utiliza un if para verificar si direccionActual es igual al valor Direccion.Abajo. Como se puede ver, esto hace que el c贸digo sea m谩s legible y f谩cil de entender que si se utilizara un n煤mero o una cadena de caracteres directamente.

Ac谩 traigo un video acerca de los enums para ayudar a clarificar este concepto tan importante https://www.youtube.com/watch?v=r8G7-hQG07o , espero sea de ayuda.

No s茅 por qu茅 dice que la convenci贸n debe ser todo en may煤sculas si todo el mundo los usa en CamelCase.

esto seria como hacer los action types en redux, que seria abstraer esos llave valor y asi poder utilizarlos sin error

Capacitor

Enum

Los enum sirven para definir un conjunto de opciones, que viene siendo como un diccionario de datos, en donde defines una llave y un valor.

Enums

El enum nos permite configurar un set de opciones, es parecido a los literals types, se declaran as铆.

enum ROLES {
  ADMIN = 'ADMIN',
  SELLER = 'SELLER',
  COSTUMER = 'COSTUMER',
};

Es aconsejable que nos enums vayan es may煤scula.

Esto es importante para hacer m煤ltiples opciones cuando tenemos diferentes opciones.

Por ejemplo vamos a crear un usuario y con el enum de roles antes declarado vamos a asignarle una propiedad de rol dentro del usuario usando un uni贸n type as铆

type User = {
  username: string;
  role: ROLES;
};

Pero entonces 驴c贸mo usamos esto? lo que haremos es usar las propiedades el enum y el uni贸n type antes declarado para dar el tipado a una variable o constante.

const juanUser:User

Despu茅s vamos a crear un objeto y empezamos a asignar las propiedades

const juanUser:User = {
  username: 'Juan david el MACHO',
}

Pero 驴C贸mo asignamos el enumerado? lo hacemos de la siguiente manera

const juanUser:User = {
  username: 'Juan david el MACHO',
  role: ROLES.ADMIN
}

De esta forma podemos usar los enumerados junto a los uni贸n types.

Ahora si definitivamente me paso a typescript.

La importancia de estos enums es increible, me sirvi贸 mucho en mi trabajo !!!鉂わ笍

Estuvo muy buena esta clase Nico, no habia visto de esta manera los Enums y el potencial que tienen

muy interesante la funci贸n 鈥渆nums鈥