Saturday, July 14, 2018

Typescript Enumeration tutorials - Best Examples

Enum basics Explained


Typescript Enum Tutorials with examples


Enum is one of the good features of typescript language. Enum is kind of one data type which holds values of same or different types. It groups similar values into one entity. Enum feature is there in all other programming languages like Java and .net Javascript has no Enum feature Enum is a keyword used to construct the enum object.

Plain Enum Example


enum Status {
    Done,
    Error,
    Exception,
}

This simple plain Enum example, which emits to the following table during javascript transpile

var Status;
(function (Status) {
    Status[Status["Done"] = 0] = "Done";
    Status[Status["Error"] = 1] = "Error";
    Status[Status["Exception"] = 2] = "Exception";
})(Status || (Status = {}));
console.log(Status.Done);


declare const enum


declare const enum Status {
    Done,
    Error,
    Exception,
}

The above code will not emit any code during javascript compilation. The same case applies with declaring enum or const enum 

Enum Number Example

if Enum values without assigned anything treated as a numeric enum. Please see the below example


enum WeekDay {
    Sunday,
    Monday,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday
}
conso.log(WeekDay.Sunday) - outputs 0
conso.log(WeekDay.Wednesday) - outputs 3
conso.log(WeekDay.Saturday) - outputs 6
We declared Enum with 7 values. By default Enum values declared are treated as Numbers. You can explicitly set the numbers only This is plain Enum example. The compiler generates the following javascript code

var WeekDay;
(function (WeekDay) {
    WeekDay[WeekDay["Sunday"] = 0] = "Sunday";
    WeekDay[WeekDay["Monday"] = 1] = "Monday";
    WeekDay[WeekDay["Tuesday"] = 2] = "Tuesday";
    WeekDay[WeekDay["Wednesday"] = 3] = "Wednesday";
    WeekDay[WeekDay["Thursday"] = 4] = "Thursday";
    WeekDay[WeekDay["Friday"] = 5] = "Friday";
    WeekDay[WeekDay["Saturday"] = 6] = "Saturday";
})(WeekDay || (WeekDay = {}));

Enum String example 

Enumeration for String is like numeric. This has initialed values at compile time

enum Month {
    Jan='January',
    Feb = 'February',
    Mar='March'
}
console.log(Month.Jan) -- returns January

Enum Examples with tutorials 

will walk through the different examples using enum keyword

How to Iterate elements of an enumeration

using for loop, we can iterate all the elements of Enum data type

for (let month in Month) {
    const myMonth: Month = Month[month] as Month;
    console.log(myMonth)
}
output is 
January
February
March

String to Enumeration conversion in typescript

It is very easy to convert to String to Enum or Enum to String as described in sample code Enumeration by defaults returns numeric index. You can look up the corresponding Enum by Index and return it as String type
 
enum Month {
    Jan,
    Feb ,
    Mar
}
// To String
var selectedMonth: string = Month[Month.Jan];
 console.log(selectedMonth) // return the Enum in String

// To Enum / number
var month : Month = Month[selectedMonth];
 console.log(selectedMonth) // String to  Enum Object

Enum to Array Object Example 

It is very easy to convert to Array Object. First, create an empty array and You just have to iterate enum and push this values to Enum
    
let map: {code: string; name: string}[] = [];

for(var n in Month) {
        map.push({code: Month[n], name: n});
}

console.log(map);

Related article


EmoticonEmoticon