Enums in TypeScript allow you to define a set of named constants. An enum is a way of giving more friendly names to sets of numeric values.
Each enum member has a value associated with it. The value can be either constant or computed. The member value can be a numeric or string value.
The Enum type in TypeScript is a user-defined data type. TypeScript has some features that are not the type-level extension of the JavaScript. Enum is one of the such few features along with type guards or union.
enum enumName {// Enum members}
The enums in TypeScript can be categorized in the following three types
- Numeric enums
- String enums
- Heterogeneous 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 1: Default numeric enums
By default, enums in TypeScript are numeric. The first member is assigned a value of 0, and subsequent members are incremented by 1.
enum Weekday {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,}console.log(Weekday.Monday);console.log(Weekday.Tuesday);console.log(Weekday.Wednesday);console.log(Weekday.Thursday);console.log(Weekday.Friday);
On compiling, it will generate the following JavaScript code
var Weekday;(function(Weekday){
Weekday[Weekday["Monday"]=0]="Monday";
Weekday[Weekday["Tuesday"]=1]="Tuesday";
Weekday[Weekday["Wednesday"]=2]="Wednesday";
Weekday[Weekday["Thursday"]=3]="Thursday";
Weekday[Weekday["Friday"]=4]="Friday";})(Weekday ||(Weekday ={}));
console.log(Weekday.Monday);
console.log(Weekday.Tuesday);
console.log(Weekday.Wednesday);
console.log(Weekday.Thursday);
console.log(Weekday.Friday);
The output of the above example code is as follows
0
1
2
3
4
Notice that the first member is initialized with 0 and the subsequent members are incremented by the 1.
Example 2: Initiated numeric enums
In the below example, we have created an enum type named Color. Inside Color, three const variables are created with names Red, Yellow, and Green. We have initialized the first member and left other members for auto increment.
enum Color{
Red =10,
Yellow,
Green,}//print const variables valuesconsole.log(Color.Red);console.log(Color.Yellow);console.log(Color.Green);
On compiling, it will generate the following JavaScript code
var Color;(function(Color){
Color[Color["Red"]=10]="Red";
Color[Color["Yellow"]=11]="Yellow";
Color[Color["Green"]=12]="Green";})(Color ||(Color ={}));//print const variables values
console.log(Color.Red);
console.log(Color.Yellow);
console.log(Color.Green);
The output of the above example code is as follows
10
11
12
Example 3: Fully initialized numeric enums
We can also set the values of all members of an enum. In the example below, we have initialized all member of the enum HttpStatus.
enum HttpStatus {
Success =200,
NotFound =404,
InternalServerError =500,}console.log(HttpStatus.Success);console.log(HttpStatus.NotFound);console.log(HttpStatus.InternalServerError);
On compiling, it will generate the following JavaScript code
var HttpStatus;(function(HttpStatus){
HttpStatus[HttpStatus["Success"]=200]="Success";
HttpStatus[HttpStatus["NotFound"]=404]="NotFound";
HttpStatus[HttpStatus["InternalServerError"]=500]="InternalServerError";})(HttpStatus ||(HttpStatus ={}));
console.log(HttpStatus.Success);
console.log(HttpStatus.NotFound);
console.log(HttpStatus.InternalServerError);
The output of the above example code is as follows
200
404
500
String Enums
String enums are similar to numeric ones except that values of enums members are assigned with strings instead of numeric ones. The string enums do not possess auto-increment behavior.
Example
The following example creates an enum TrafficLight with three members. The members are initialized with string literals.
enum TrafficLight {
Red ="stop",
Yellow ="caution",
Green ="go",}console.log(TrafficLight.Red);console.log(TrafficLight.Yellow);console.log(TrafficLight.Green);
On compiling, it will generate the following JavaScript code
var TrafficLight;(function(TrafficLight){
TrafficLight["Red"]="stop";
TrafficLight["Yellow"]="caution";
TrafficLight["Green"]="go";})(TrafficLight ||(TrafficLight ={}));
console.log(TrafficLight.Red);
console.log(TrafficLight.Yellow);
console.log(TrafficLight.Green);
The output of the above example code is as follows
stop
caution
go
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 three const variables: Name, Gender, and Mobile. Name and Gender are of literal string types, whereas Mobile is of numeric value.
enum student{
Name ="srujana",
Gender ="female",
Mobile =901234567,}console.log(student.Name);console.log(student.Gender);console.log(student.Mobile);
On compiling, it will generate the following JavaScript code
var student;(function(student){
student["Name"]="Srujana";
student["Gender"]="Female";
student[student["Mobile"]=901234567]="Mobile";})(student ||(student ={}));
console.log(student.Name);
console.log(student.Gender);
console.log(student.Mobile);
The output of the above example code is as follows
Srujana
Female
901234567
Enums at runtime
The enums are real objects that exist at run time. In the below example, the enum E is passed as parameter object to a function. It works, since ‘E’ has a property named ‘y’ which is a number.
enum En {
x,
y,
z,}functionfunc(obj:{ y:number}){return obj.y;}console.log(func(En));console.log(typeof En);
On compiling, it will generate the following JavaScript code.
var En;(function(En){
En[En["x"]=0]="x";
En[En["y"]=1]="y";
En[En["z"]=2]="z";})(En ||(En ={}));functionfunc(obj){return obj.y;}
console.log(func(En));
console.log(typeof En);
The output of the above code is as follows
1
object
Enums at compile time
When TypeScript enums are compiled, they are converted to JavaScript objects. The object will have a property for each enum member, and the value of each property will be the enum member’s value.
The numeric and string enum members behave differently at the compilation. The numeric members are mapped bi-directionally to its corresponding JavaScript object property while string members are mapped uni-directionally to its runtime object property.
enum Enum {
Name ='John Doe',
Age =32,}
The above TypeScript code will be compiled to the following JavaScript code
var Enum;(function(Enum){
Enum["Name"]="John Doe";
Enum[Enum["Age"]=32]="Age";})(Enum ||(Enum ={}));</code></pre>
Please note that the after compilation, the Name member get mapped unidirectionally and Age member get mapped bi-directionally to its corresponding runtime object properties.
Const Enums
The const enums are special enums in TypeScript that are completely removed during the compilation. These emums are not included in the compiled JavaScript output.
Reverse Mapping
As discussed above that the numeric enum members after compilation get mapped bidirectionally with its runtime object property. This is known as reverse mapping.
enum Enum {A=1,}console.log(Enum.A)console.log(Enum['A'])console.log(Enum[1]);
On compiling, it will generate the following JavaScript code.
var Enum;(function(Enum){
Enum[Enum["A"]=1]="A";})(Enum ||(Enum ={}));
console.log(Enum.A);
console.log(Enum['A']);
console.log(Enum[1]);
The output of the above code is as follows
1
1
A
Ambient enums
In TypeScript, ambient enums are used to describe the shape of the already existing enum types. The ambient enums don't generate any JavaScript code. To declare an ambient enum, you can use the declare keyword. Look at the below example
declareenum Fruit {
Apple,
Orange,
Banana,}</code></pre>
The above code declares the shape of the enum without generating the JavaScript code. It means you can use the Fruit enum in TypeScript code but will not be included in compiled JavaScript code.
Object vs. Enums
An object with as const could suffice the need of the enums. So in modern TypeScript, you may not need enums. When an object could work as enums why to use a different type and also the objects align the state of the JavaScript.
Let's look at the examples of enums and object with as const.
// enumenum EWeekend {
Saturday,
Sunday,}console.log(EWeekend.Saturday)// object with as constconst OWeekend ={
Saturday:0,
Sunday:1,}asconst;console.log(OWeekend.Saturday);</code></pre>
On compiling, it will generate the following JavaScript code
// enumvar EWeekend;(function(EWeekend){
EWeekend[EWeekend["Saturday"]=0]="Saturday";
EWeekend[EWeekend["Sunday"]=1]="Sunday";})(EWeekend ||(EWeekend ={}));
console.log(EWeekend.Saturday);// object with as constconst OWeekend ={
Saturday:0,
Sunday:1,};
console.log(OWeekend.Saturday);
The output of the above example code is as follows
0
0
Using enum as a function parameter
We can use the enum as a parameter in the function definition.
enum Color {
Red,
Green,
Blue,}functionprintColor(color: Color):void{console.log(color);}printColor(Color.Red);// Prints 0 to the console
In the above example, the function printColor() takes a parameter of type Color. It returns nothing but logs the color in the console.
On compiling, it will generate the following JavaScript code
var Color;(function(Color){
Color[Color["Red"]=0]="Red";
Color[Color["Green"]=1]="Green";
Color[Color["Blue"]=2]="Blue";})(Color ||(Color ={}));functionprintColor(color){
console.log(color);}printColor(Color.Red);// Prints 0 to the console</code></pre>
The above example code will produce the following output
0
