In this article you will learn about Enum in Typescript in detail. This article will help beginners to understand the concept.
Syntax
enum enumName{
constant1, constant2, constant3...
}
Example
Consider traffic signal lights as an example.
We can access the elements using index or by constant name:
enum signalLights{
red, yellow, green
}
let result: string = signalLights[signalLights.red];
console.log(result);
console.log(signalLights[1]);
let output: signalLights = (<any>signalLights)["yellow"];
console.log(output);
Output
red
yellow
1
Consider that in the below rainbowColors is enum & we have not initialized any constants, so it will starts with 0 value and the rest of the constants have auto increamemtal values.
**Example **
enum rainbowColors {
Red,
Orange,
Yellow,
Green,
Blue,
Indigo,
Violet,
}
console.log("color & index value is as follows");
for (let item in rainbowColors) {
if (isNaN(Number(item))) {
console.log(item + " : " + < rainbowColors > rainbowColors[item]);
}
}
Output
color & index value is as follows:
Red : 0
Orange : 1
Yellow : 2
Green : 3
Blue : 4
Indigo : 5
Violet : 6
Consider the below example, rainbowColors is enum & the second element is initialized with value 1000. So it will be auto incremental to the remaining constants. It will print on the console.
**Example **
enum rainbowColors {
Red,
Orange = 1000,
Yellow,
Green,
Blue,
Indigo,
Violet,
}
console.log("color & index value is as follows");
for (let item in rainbowColors) {
if (isNaN(Number(item))) {
console.log(item + " : " + < rainbowColors > rainbowColors[item]);
}
}
Output
color & index value is as follows,
Red : 0
Orange : 1000
Yellow : 1001
Green : 1002
Blue : 1003
Indigo : 1004
Violet : 1005
Consider the below example. We can use function in enum if we are returning the value from the function. It is used when the user needs to do any calculation. Suppose we need to calculate the total minutes like 1 hour = 60 minute, 2 hour = 120 minute, then it will create one function which will do a calcuation & return values to enum constant:
Example
function Totalminute(hr: number): any{
return 60 * hr;
}
enum hours
{
One = Totalminute(1) ,
Two = Totalminute(2),
Three = Totalminute(4),
}
console.log(hours.One);
console.log(hours.Two);
console.log(hours.Three);
Output
60
120
240
It is same as the numeric enums, we are just passing string values/literals to our enum constant. enum keyword is used to declare the enums.
Consider the below example, our vehicle is taking different kinds of turns, and we will define the enum as:
Example
enum vehicleTurn {
Left = "Left",
Right = "Right",
UTurn = "UTurn"
}
console.log(vehicleTurn.Left);
console.log(vehicleTurn.Right);
console.log(vehicleTurn.UTurn);
}
Output
Left
Right
UTurn
Typescript allows us to create a mixed type of enums.
This means we can assign numeric & string type values to enum.
Consider the below example, circleInfo has heterogeneous enum values.
Example
enum circleInfo {
Area = "area of circle",
Pie = 3.112,
Radius = 20
}
let result = circleInfo.Pie * circleInfo.Radius * circleInfo.Radius;
console.log(circleInfo.Area + " is :" + result);
Output
area of circle is :1244.8
Consider the below example, clothSize is enum which contains some constants. IClothSize is an interface which contains two properties, key & value, having string & number type respectively.
Function is taking enum as a parameter & will print the data on the console.
Example
enum clothSize {
small,
medium,
large
}
interface IClothSize {
key: string,
value: number
}
function getClothSize(size: clothSize): IClothSize {
switch (size) {
case clothSize.small:
return {
key: clothSize[clothSize.small], value: 10
};
case clothSize.medium:
return {
key: clothSize[clothSize.medium], value: 20
};
case clothSize.large:
return {
key: clothSize[clothSize.large], value: 30
};
}
}
console.log("cloth is " + getClothSize(clothSize.small).key + " & value is " + getClothSize(clothSize.small).value);
console.log("cloth is " + getClothSize(clothSize.medium).key + " & value is " + getClothSize(clothSize.medium).value);
Output
cloth is small & value is 10
cloth is medium & value is 20
Example
const enum myColor {
Red = 10,
White = Red * 4,
Blue = White + 10,
Yellow,
}
console.log(myColor.Red)
console.log(myColor.White)
console.log(myColor.Blue)
console.log(myColor['Yellow'])
Output
10
40
50
51
We will not be able to access enum using index in const enum like myColor[0], it will give us an error.
ES6 allows us to use map enum keys.
Example
enum classes {
I,
II,
III,
IV,
V
}
const ClassNames = new Map < number,
string > ([
[classes.I, '100'],
[classes.II, '200'],
[classes.III, '300'],
]);
console.log(ClassNames);
Output
Map(3) {0 => “100”, 1 => “200”, 2 => “300”}
We will modify the above example, we can use this into a classes as below.
Note
User can modify the code as per their requirement.
Example
enum classes {
I,
II,
III,
IV,
V
}
const ClassNames = new Map < number,
string > ([
[classes.I, '100'],
[classes.II, '200'],
[classes.III, '300'],
]);
class AllStandards {
public allNames: object;
constructor() {
this.allNames = ClassNames;
}
}
let obj: AllStandards = new AllStandards();
console.log(obj.allNames);
Output
Map(3) {0 => “100”, 1 => “200”, 2 => “300”}
We can declare the enum like this:
export enum sportActivities {Football, Cricket,Badminton, Tennis}
To import the enum in .ts, i.e.; typescript file looks like this:
import {sportActivities} from '../enums'
In this article, you learned about enum in Typescript. Thanks for reading!
#typescript #angular #Enum in Typescript