TypeScript Enums: cómo definir valores constantes para variables

Los enums de TypeScript son una clase especial de variables constantes. Puedes definir los valores de estas variables por adelantado, diferenciando entre enums numéricos y enums basados en cadenas.

¿Qué son los enums en TypeScript?

Los enums (abreviatura de “enumerated types”, es decir, “tipos enumerados”) son tipos de datos que contienen un conjunto finito de valores. Este conjunto de valores se define claramente durante la declaración del enum con un identificador y no se puede modificar posteriormente. Además, puedes definir el orden en el que aparecen los valores. Con los enums de TypeScript, puedes crear variables constantes que mejoran la legibilidad de tu código y, al mismo tiempo, previenen errores. Los enums son una de las pocas características que no son una extensión del tipado estático de JavaScript. Existen dos tipos de enums en TypeScript: los numéricos y los basados en cadenas de texto. A continuación, te mostramos ambas variantes.

Enums numéricos en TypeScript

En los enums numéricos de TypeScript, el primer valor es “0” de forma predeterminada. Posteriormente, cada valor se incrementa en “1” unidad respecto al anterior. Para crear un enum numérico, debes utilizar el parámetro enum y almacenar las cadenas en formato numérico. En el siguiente ejemplo sencillo, verás cómo definir los meses y asignarles un valor. Luego, puedes consultar el valor asignado al mes de abril:

enum Meses {
	Enero,
	Febrero,
	Marzo,
	Abril,
	Mayo,
	Junio,
	Julio,
	Agosto,
	Septiembre,
	Octubre,
	Noviembre,
	Diciembre
}
let mesActual = Meses.Abril;
console.log(mesActual);

El resultado es el siguiente:

3

De forma predeterminada, el sistema asigna valores empezando por el “0”, por lo que enero recibe el valor “0”, febrero el “1”, marzo el “2” y abril el “3”. Si deseas que la numeración coincida con la numeración real de los meses, puedes inicializar los enums de TypeScript y asignar manualmente los valores correctos. Para ello, solo necesitas modificar ligeramente el código anterior:

enum Meses {
	Enero = 1,
	Febrero,
	Marzo,
	Abril,
	Mayo,
	Junio,
	Julio,
	Agosto,
	Septiembre,
	Octubre,
	Noviembre,
	Diciembre
}
let mesActual = Meses.Abril;
console.log(mesActual);

El resultado ahora coincide con la numeración real de los meses:

4

Basta con asignar el valor que quieras al primer mes; el sistema continuará numerando de forma ascendente en incrementos de uno, como de costumbre.

Asignación manual de valores numéricos

Si no quieres que los valores se numeren automáticamente, también puedes asignar manualmente un valor numérico a cada elemento del enum de TypeScript. Por ejemplo, si tienes cuatro tomos de una serie de novelas, puedes almacenar el número de páginas de cada tomo como un valor constante. Luego, puedes comprobar el número de páginas del segundo tomo con el siguiente código:

enum NumeroDePaginas {
	Tomo1 = 491,
	Tomo2 = 406,
	Tomo3 = 360,
	Tomo4 = 301
}
let paginas = NumeroDePaginas.Tomo2;
console.log(paginas);

El resultado es el siguiente:

406

TypeScript Enums basados en cadenas de texto

Los enums basados en cadenas de texto en TypeScript funcionan de manera similar a los numéricos, pero en este caso, asignas cadenas de texto a los elementos del enum. Por ejemplo, puedes asignar a los días de la semana una abreviatura adecuada en formato de cadena, que se coloca entre comillas. Luego, puedes consultar los valores de “Viernes” y “Martes” para verificarlos:

enum DiasDeLaSemana {
Lunes = "Lu",
Martes = "Ma",
Miércoles = "Mi",
Jueves = "Ju",
Viernes = "Vi",
Sábado = "Sa",
Domingo = "Do"
};
console.log(DiasDeLaSemana.Viernes);
console.log(DiasDeLaSemana.Martes);

El resultado es el siguiente:

Vi
Ma

Combinar números y cadenas

En teoría, puedes combinar los enums numéricos y los basados en cadenas de TypeScript. Aunque los casos de uso de esta opción son bastante limitados, aquí tienes un ejemplo de cómo hacerlo. En este caso, especificamos valores diferentes, pero el procedimiento es el mismo:

enum DiasDeLaSemana {
Lunes = "Lu",
Martes = 2,
Miércoles = 3,
Jueves = "Ju",
Viernes = "Vi",
Sábado = 6,
Domingo = "Do"
};
console.log(DiasDeLaSemana.Viernes);
console.log(DiasDeLaSemana.Martes);

Ahora el resultado es el siguiente:

Vi
2

Reverse Mapping en enums de TypeScript

El Reverse Mapping (en español, “mapeo inverso”) de TypeScript permite acceder tanto al valor de un enum como a su nombre. Para ilustrar este principio, volvamos a nuestro ejemplo con los días de la semana:

enum DiasDeLaSemana {
Lunes = 1,
Martes,
Miércoles,
Jueves,
Viernes,
Sábado,
Domingo
};
DiasDeLaSemana.Viernes
DiasDeLaSemana["Viernes"];
DiasDeLaSemana[5];

En este ejemplo, DiasDeLaSemana.Viernes devuelve el valor “5”. Lo mismo ocurre con DiasDeLaSemana["Viernes"]. Sin embargo, utilizando Reverse Mapping, DiasDeLaSemana[5] devolverá el día “Viernes”. Puedes visualizar esto con el siguiente código:

enum DiasDeLaSemana {
Lunes = 1,
Martes,
Miércoles,
Jueves,
Viernes,
Sábado,
Domingo
};
console.log(DiasDeLaSemana);

El resultado es el siguiente:

{
    '1': 'Lunes',
    '2': 'Martes',
    '3': 'Miércoles',
    '4': 'Jueves',
    '5': 'Viernes',
    '6': 'Sábado',
    '7': 'Domingo',
    Lunes: 1,
    Martes: 2,
    Miércoles: 3,
    Jueves: 4,
    Viernes: 5,
    Sábado: 6,
    Domingo: 7
}

Convertir TypeScript Enums en arrays

También puedes convertir enums de TypeScript en arrays de TypeScript. Por ejemplo, para convertir los días de la semana en un array, puedes utilizar el siguiente código:

enum DiasDeLaSemana {
Lunes = "Lu",
Martes = "Ma",
Miércoles = "Mi",
Jueves = "Ju",
Viernes = "Vi",
Sábado = "Sa",
Domingo = "Do"
};
const diasDeLaSemanaArray: { label: string; value: string }[] = [];
for (const key in DiasDeLaSemana) {
    if (DiasDeLaSemana. hasOwnProperty(key)) {
        diasDeLaSemanaArray.push({ label: key, value: DiasDeLaSemana[key] });
    }
}
console.log(diasDeLaSemanaArray);

El resultado es el siguiente:

[
    { label: 'Lunes', value: 'Lu' },
    { label: 'Martes', value: 'Ma' },
    { label: 'Miércoles', value: 'Mi' },
    { label: 'Jueves', value: 'Ju' },
    { label: 'Viernes', value: 'Vi' },
    { label: 'Sábado', value: 'Sa' },
    { label: 'Domingo', value: 'Do' }
]