In TypeScript, Enums or enumerations are a set of named constants. Enums allows us to define a named collection of related values; while the values are constants.
TypeScript supports both traditional enums and string-based enums. An enum can be defined using the enum keyword.
1. String Enums
In String enums, the enum values are initialized with string values. String enums are recommended approach in comparison to traditional numeric enums.
When debugging a program, a string value is always more readable than some number.
Always use string-based enums, until you have a very solid reason for choosing traditional enums over this.
1.1. Syntax
Enum syntax is very similar to other languages e.g. Java.
enum AppStatus {
ACTIVE = 'ACTIVE',
INACTIVE = 'INACTIVE',
ONHOLD = 'ONHOLD'
}
Look at the generated code in JavaScript. It has a generated lookup table like this.
var AppStatus;
(function (AppStatus) {
AppStatus["ACTIVE"] = "ACTIVE";
AppStatus["INACTIVE"] = "INACTIVE";
AppStatus["ONHOLD"] = "ONHOLD";
})(AppStatus || (AppStatus = {}));
1.2. Access enum member values
Use Enum.member or Enum['member'] format to access enum member values.
enum AppStatus {
ACTIVE = 'ACT',
INACTIVE = 'INACT',
ONHOLD = 'HLD'
}
AppStatus.ACTIVE //ACT
AppStatus.INACTIVE //INACT
AppStatus['ACTIVE'] //ACT
//Never use numbers with string based enums
AppStatus[0] //undefined
1.3. Enum as function argument
To pass enum in functions, declare the argument type of enum itself.
enum AppStatus {
ACTIVE = 'ACT',
INACTIVE = 'INACT',
ONHOLD = 'HLD'
}
function checkStatus(status: AppStatus): void {
console.log(status);
}
checkStatus(AppStatus.ONHOLD);
2. Traditional Numeric Enums
Though not recommended, we may come across situations where we need it. So let’s quickly learn.
2.1. Syntax
Syntax is pretty simple and old school. As we have not initialized the values, transpiler generates lookup table with values assigned in array index fashion (starting with zero and then incrementing by one for each member).
enum AppStatus {
ACTIVE, //0
INACTIVE, //1
ONHOLD //2
}
If we want to start with any other number, then assign it to the first enum member. All following members will get the value by incrementing one by one.
enum AppStatus {
ACTIVE = 5, //5
INACTIVE, //6
ONHOLD //7
}
It is not necessary to assign sequential values to Enum members. You can assign any value to any element.
enum AppStatus {
ACTIVE = 1, //1
INACTIVE = -1, //-1
ONHOLD = 0 //0
}
2.2. Access enum member values
As these are number based enums, you can use the format enum[index_number] as well, along with Enum.member or Enum['member'].
enum AppStatus {
ACTIVE,
INACTIVE,
ONHOLD
}
console.log(AppStatus.ACTIVE); //0
console.log(AppStatus['INACTIVE']); //1
console.log(AppStatus[0]); //ACTIVE
2.3. Enum as function argument
To pass enum in functions, declare the argument type of enum itself.
enum AppStatus {
ACTIVE,
INACTIVE,
ONHOLD
}
function checkStatus(status: AppStatus): void {
console.log(status);
}
checkStatus(AppStatus.ONHOLD); //2
Please see the value printed '2' in last statement. It is not very useful in most of the scenarios, so that’s why string-based enums are preferred and recommended.
Drop me your questions in comments section.
Happy Learning !!