Explain Enum in TypeScript

Before getting into "enum," it is essential to know about the popular keyword "const" in typescript. When we declare a variable "const", we cannot change the value assigned to it.

So, enums are nothing but a collection of these const data types. We can create enums with the help of the "enum" keyword. Enum is an abbreviation for Enumerations, and each constant variable declared under the enum is called a member of that enum.

In this article, we will learn about enums in typescript, their features, and the major types of enums.

Features of enum in TypeScript

• Enums in typescript possess a surprising feature. The member variables of the enum have their index values as default values if we do not assign any importance to them.

• Every member of the enum must contain a value. We can assign a constant, or a value can also be computed from a function. The enum member stores the default constant value if none of the above cases.

• Enum members can also be assigned with constant expressions. Any constant expression in typescript is evaluated at compile time rather than run time.

• Enums can be passed as parameters to the functions, computed through functions, and returned to functions.

• Enum in typescript supports the concept of reverse mapping. Through reverse mapping, we can access the member from its value and the value from its index member. The idea behind this concept is that internally enum objects store the members in two ways, by its variable referring to value and value referring to the enum variable. As typescript generally converts the code to javascript, it supports reverse mapping.

• String enums do not support reverse mapping; in heterogeneous enums, only numeric enums support reverse mapping.

• Const enum types are removed at compile time and will be replaced with their values. Hence, const enums are faster than regular enums, reducing the complexity of generating extra code at compile time. But we can only use constant members in the const enum, and we cannot use computed members.

Types of Enums

Numeric Enums

In this type of enum, members of an enum are assigned numeric values. Numeric enums possess an auto-increment nature. For instance, if we assign the number 5 to the first constant variable of the enum, then the following constant variables assign with values incremented by one, like 6 to the second member of the enum, 7 to the next, and so on.

Example

In the below example, we have created an enum type named color. Inside color, four const variables are created with names red, blue, yellow, and pink. To demonstrate numeric enums auto increment nature, we have the values to the first two const variables and leave the other two defaults. Let's see their default values in the output.

//enum type color
enum color{
   //assign numeric value
   red = 1,
   blue = 3,
   pink,
   yellow
}
//print const variables values
console.log(color.red);
console.log(color.blue);
console.log(color.pink);
console.log(color.yellow);

On compiling, it will generate the following JavaScript code:

//enum type color
var color;
(function (color) {
   //assign numeric value
   color[color["red"] = 1] = "red";
   color[color["blue"] = 3] = "blue";
   color[color["pink"] = 4] = "pink";
   color[color["yellow"] = 5] = "yellow";
})(color || (color = {}));
//print const variables values
console.log(color.red);
console.log(color.blue);
console.log(color.pink);
console.log(color.yellow);

Output

The above code will produce the following output ?

1
3
4
5

As users can notice in the output, the following const variables after blue assigned themselves with default values of incremented by one.

String Enums

IString enums are similar to numeric ones except that values of string enums are assigned with strings instead of numeric ones. The string enums do not possess auto-increment behavior.

Example

We have created a string type enum named "names" in the following example. Under the created enum, we have declared four variables student1, student2, student3, and student4. These variables are assigned with string literals. No default string values are stored in the string enum types, and only numeric values are stored as default if no value is assigned.

enum names{
//assign string literal
   student1 = "john",
   student2 = "srujana",
   student3 = "sam",
   student4 = "ram"
}
//print const variables values
console.log(names.student1);
console.log(names.student2);
console.log(names.student3);
console.log(names.student4);

On compiling, it will generate the following JavaScript code:

var names;
(function (names) {
   //assign string literal
   names["student1"] = "john";
   names["student2"] = "srujana";
   names["student3"] = "sam";
   names["student4"] = "ram";
})(names || (names = {}));
//print const variables values
console.log(names.student1);
console.log(names.student2);
console.log(names.student3);
console.log(names.student4);

Output

The above code will produce the following output ?

john
srujana
sam
ram

As users can notice in the output, the first three enum variables are string types. Hence, this is a string-type enum.

Heterogeneous Enums

This is a combination of both numeric and string enums. That is, in this type of enum, we can assign both string values or numeric values to its members.

Example

In the below example, we have created an enum type of student. Inside the student are four const variables: name, roll_no, gender, and mob_no. Name and gender are of literal string types, whereas roll_no and mob_no are of numeric values.

//enum type student
enum student{
   //assign string literal
   name = "srujana",
   roll_no = 15,
   gender = "female",
   mob_no = 9873890414
}
console.log(student.name);
console.log(student.roll_no);
console.log(student.gender);
console.log(student.mob_no);

On compiling, it will generate the following JavaScript code:

//enum type student
var student;
(function (student) {
   //assign string literal
   student["name"] = "srujana";
   student[student["roll_no"] = 15] = "roll_no";
   student["gender"] = "female";
   student[student["mob_no"] = 9873890414] = "mob_no";
})(student || (student = {}));
console.log(student.name);
console.log(student.roll_no);
console.log(student.gender);
console.log(student.mob_no);

Output

The above code will produce the following output ?

srujana
15
female
9873890414

In this article, users got introduced to the typescript keyword "enum". Its features and categories are well explained, and examples are also shared for every type of enum discussed.