How to use Type­Script enums to define constant values for variables

Type­Script enums are a special class con­sist­ing of constant variables. You can define the value of these variables in advance. A dis­tinc­tion is made between numeric and string-based enums.

What are Type­Script enums?

Enums (short for “enu­mer­at­ed types”) are data types that have a finite set of values. This set of values is already clearly defined during the de­c­la­ra­tion of an enum with an iden­ti­fi­er and cannot be changed af­ter­wards. The order in which the values may appear can also be defined in advance. With Type­Script enums, you can create constant variables that increase the read­abil­i­ty of your code and at the same time avoid errors. This is one of the few features that is not a sta­t­i­cal­ly typed extension of JavaScript. A dis­tinc­tion is made between numeric and string-based Type­Script enums. We will introduce you to both variants.

Numeric Type­Script enums

In numeric Type­Script enums, the initial value is set to “0” by default, and each following value is au­to­mat­i­cal­ly in­cre­ment­ed by “1”. The method is ini­tial­ized with the enum parameter and stores strings as numeric values. In a basic example, we define the months and assign a value to each one. Afterward, we retrieve the value assigned to the month of April:

enum Months {
	January,
	February,
	March,
	April,
	May,
	June,
	July,
	August,
	September,
	October,
	November,
	December
}
let currentMonth = Months.April;
console.log(currentMonth);

The output looks like this:

3

The system begins assigning values by default starting from “0”, meaning January is assigned “0”, February “1”, March “2”, and April, receives the value, “3”. Since this doesn’t match the actual month numbering, we ini­tial­ize the Type­Script enums and manually assign the correct values. To achieve this, we only need to make minor ad­just­ments to the code above:

enum Months {
	January = 1,
	February,
	March,
	April,
	May,
	June,
	July,
	August,
	September,
	October,
	November,
	December
}
let currentMonth = Months.April;
console.log(currentMonth);

Now the output looks like this:

4

You only need to set the desired value for the first month. After that, the system will au­to­mat­i­cal­ly continue counting by one as usual.

Assign your own numeric values

To override the automatic numbering, you can assign custom numeric values to each element in a Type­Script enum. In the following example, we have four volumes of a book series and aim to store their re­spec­tive page counts as fixed values. Then, to verify, we’ll display the page count for the second volume. The code would look like this:

enum PageNumber {
	Volume1 = 491,
	Volume2 = 406,
	Volume3 = 360,
	Volume4 = 301
}
let pages = PageNumber.Volume2;
console.log(pages);

The output would be:

406

String-based Type­Script enums

String-based Type­Script enums function in a similar manner. However, instead of assigning numerical values, you assign strings to the enums. In the example below, each day of the week is given a cor­re­spond­ing ab­bre­vi­a­tion in string format, enclosed in quotation marks. We then retrieve the values for “Friday” and “Tuesday” to verify the output. Here’s the code:

enum WeekDays {
Monday = "Mo",
Tuesday = "Tu",
Wednesday = "We",
Thursday = "Th",
Friday = "Fr",
Saturday = "Sa",
Sunday = "Su"
};
console.log(WeekDays.Friday);
console.log(WeekDays.Tuesday);

The output for this is:

Fr
Tu

Combining numbers and strings

It’s also possible to combine numeric and string-based Type­Script enums, although the use cases for this approach are fairly limited. However, for the sake of com­plete­ness, we’ll provide an example. In this case, we define different values, but the process itself remains unchanged:

enum WeekDays {
Monday = "Mo",
Tuesday = 2,
Wednesday = 3,
Thursday = "Th",
Friday = "Fr",
Saturday = 6,
Sunday = "Su"
};
console.log(WeekDays.Friday);
console.log(WeekDays.Tuesday);

The output now reads as follows:

Fr
2

Reverse mapping for constant data types

The concept of Reverse Mapping means that if you can access the value of a Type­Script enum, you can also retrieve its cor­re­spond­ing name. To demon­strate this principle, let’s revisit our example with the days of the week:

enum WeekDays {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
};
WeekDays.Friday
WeekDays["Friday"];
WeekDays[5];

In this example, WeekDays.Friday outputs the value “5”, as does WeekDays[“Friday”]. Thanks to reverse mapping, however, WeekDays[5] will return the name “Friday”. This can be il­lus­trat­ed with the following simple command:

enum WeekDays {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
};
console.log(WeekDays);

This gives us the following output:

{
    '1': 'Monday',
    '2': 'Tuesday',
    '3': 'Wednesday',
    '4': 'Thursday',
    '5': 'Friday',
    '6': 'Saturday',
    '7': 'Sunday',
    Monday: 1,
    Tuesday: 2,
    Wednesday: 3,
    Thursday: 4,
    Friday: 5,
    Saturday: 6,
    Sunday: 7
}

Convert Type­Script enums to array

It is also possible to convert Type­Script enums into Type­Script arrays. For our example using the days of the week, the code looks like this:

enum WeekDays {
Monday = "Mo",
Tuesday = "Tu",
Wednesday = "We",
Thursday = "Th",
Friday = "Fr",
Saturday = "Sa",
Sunday = "Su"
};
const weekdaysArray: { label: string; value: string }[] = [];
for (const key in WeekDays) {
    if (WeekDays.hasOwnProperty(key)) {
        weekdaysArray.push({ label: key, value: WeekDays[key] });
    }
}
console.log(weekdaysArray);

This is how we get this output:

[
    { label: 'Monday', value: 'Mo' },
    { label: 'Tuesday', value: 'Tu' },
    { label: 'Wednesday', value: 'We' },
    { label: 'Thursday', value: 'Th' },
    { label: 'Friday', value: 'Fr' },
    { label: 'Saturday', value: 'Sa' },
    { label: 'Sunday', value: 'Su' }
]