In this article, we’ll see what is enum or enumeration and why it’s used and we’ll also see how to get names and values of enum in typescript example.
Table of Contents
What are Enums?
In typescript enum is available from typescript version 2.4.
Enum or Enumeration allowed us to declare set of named constants.
Enum is a collection of value the can be of type string or numeric as a named constants.
Why Enums are used?
Enum is used when you’ve set of choices that you’re using across the applications. so the set of choices that belongs together can be grouped in enum.
Enum for multiple constants
For example, instead of using multiple const
const directionUp = 1;
const directionDown = 2;
const directionLeft = 3;
const directionRight = 4;
We can use the following enum instead of the above code.
enum Direction {
Up = 1,
Down,
Left,
Right
}
There are some advantages of using enum:
- All the direction related constants are grouped and nested inside
Direction
. - We can use
Direction
anywhere where we need the constant and typescript to check statically that no other values can be used.
Enum for user permission
Enum can be used for user permission.
enum Permissions
{
None = 0,
Read = 1,
Write = 2,
Delete = 4
}
This enum is power of 2. so that we can write something like:
var permissions = Permission.Read | Permission.Write
If we see this enum in bit fields, it’ll looks something like:
Permissions.Read == 1 == 00000001
Permissions.Write == 2 == 00000010
Permissions.Delete == 4 == 00000100
so our statement
var permissions = Permission.Read | Permission.Write
will become
var permissions = 00000001 | 00000010 = 00000011
Both the Read and Write bits are set, and I can check that independently (Also notice that the Delete bit is not set and therefore this value does not convey permission to delete).
In short, our enum is a shorter way to writeL
public enum Permissions
{
DeleteNoWriteNoReadNo = 0, // None
DeleteNoWriteNoReadYes = 1, // Read
DeleteNoWriteYesReadNo = 2, // Write
DeleteNoWriteYesReadYes = 3, // Read + Write
DeleteYesWriteNoReadNo = 4, // Delete
DeleteYesWriteNoReadYes = 5, // Read + Delete
DeleteYesWriteYesReadNo = 6, // Write + Delete
DeleteYesWriteYesReadYes = 7, // Read + Write + Delete
}
Type of Typescript Enums
There are three types of enum in typescript:
- Numeric Enum
- String Enum
- Heterogenous Enum
Numeric Enum
By default typescript enum are numeric enum.
enum Direction {
Up,
Down,
Left,
Right
}
In the above example, we didn’t initialise the value of enum so by default Up will be having value 0 and Down will have 1 and for all following member will have auto-incremented values.
so it’ll be having following values:
- Up = 0
- Down = 1
- Left = 2
- Right = 3
We can also initialise by setting the value as following:
enum Direction {
Up = 4,
Down,
Left,
Right
}
so it’ll. be having the following values:
- Up = 4
- Down = 5
- Left = 6
- Right = 7
How to get names from numeric enum?
Enum is basically an object. Numeric enums not only create object with property names for enum member but also create a reverse mapping from enum values to enum name.
For example,
enum Enum {
A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
so if we’ll log our direction enum, it’ll output the following result.
{
1: "Up"
2: "Down"
3: "Left"
4: "Right"
Down: 2
Left: 3
Right: 4
Up: 1
}
so you can see that reverse mapping is also created in numeric enum.
Now if we want to get the name of enum by values, we can do the following iteration:
for (var enumMember in Direction) {
var isValueProperty = parseInt(enumMember, 10) >= 0;
if (isValueProperty) {
console.log("enum member: ", Direction[enumMember]);
}
}
Output
enum member: Up
enum member: Down
enum member: Left
enum member: Right
To get the individual member name you can do something like;
console.log(Direction[1])
String Enums
String enum is similar to numeric enum but with small difference. With string enum, each member has to constant initialized with string literal or with another string enum member.
enum Direction {
Up = "UP-DIRECTION",
Down = "DOWN-DIRECTION",
Left = "LEFT-DIRECTION",
Right = "RIGHT-DIRECTION"
}
How to get names from string enum?
For string enum, you can get the name directly by iterating enum through for loop because string enums directly store key value pairs in enum object.
for (var enumMember in Direction) {
console.log("enum member: ",enumMember);
}
Output
enum member: Up
enum member: Down
enum member: Left
enum member: Right
Heterogeneous enums
Enum can be mixed. It can have numeric as well as string values. This type enum is known as Heterogeneous enums.
For example,
enum Direction {
Up = 1,
Down = "DownValue",
Left = 3,
Right = "RightValue"
}
How to get names from Heterogeneous enum?
We’ll first see how typescript create an object for Heterogeneous enum.
If you’ll log above enum, it’ll show the following output:
{
1: "Up"
3: "Left"
Down: "DownValue"
Left: 3
Right: "RightValue"
Up: 1
}
Here you can see that for the numeric member, typescript created object with reverse mapping as well.
To get the name of Heterogeneous enum member, use the following implementation:
for (var enumMember in Direction) {
var isValueProperty = parseInt(enumMember, 10) >= 0;
if (!isValueProperty) {
console.log("enum member: ", enumMember);
}
}
Output
enum member: Up
enum member: Down
enum member: Left
enum member: Right
That’s is for enum and getting names and values of enum for Numeric, String or Heterogeneous enums.
Enum Typescript: FAQ
What are the type of enum in typescript?
- Numeric Enums
- String Enumns
- Heterogeneous Enums
What are Enums?
I hope you like this enum in typescript example article.
Also Read:
- How to convert string to number in javascript or typescript
- Different ways to read Local JSON file in Angular with example
- Angular Material Date Range Picker
- What’s new in Angular 10
- How to install angular material in Angular Application
- Integrate CKEditor(rich text editor) in Angular
- Different ways to install bootstrap 4 in angular application