Typescript Enum tutorials - Best Examples

Typescript Enum tutorials - Best Examples

Enum type in typescript

Enums are one of the latest features of the TypeScript language. They represent a data type capable of holding either the same value or different types, effectively grouping similar values into a single entity.

The enum feature is present in other programming languages such as Java and Microsoft .Net, but JavaScript lacks native support for enums.

enum is the keyword used to define an enum object.

You can check my other posts on typescript Enum object.

Plain Enum Example

Let’s declare an enum in TypeScript.

enum Status {
    Done,
    Error,
    Exception,
}

This simple plain enum example compiles to the following JavaScript code.

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);

How to Declare Constants in Enum in TypeScript

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

The above code will not emit any JavaScript code during compilation. The same applies when declaring enums or constant enums.

TypeScript Enum Number Example

If no type is assigned to the values in an enum, they are treated as numeric enums.

Please see the example below:

enum WeekDay {
    Sunday,
    Monday,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday
}

console.log(WeekDay.Sunday); // outputs 0
console.log(WeekDay.Wednesday); // outputs 3
console.log(WeekDay.Saturday); // outputs 6

In this example, we have declared an enum with 7 values. Enum values declared without explicit types are treated as numbers by default. This is a 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 = {}));

TypeScript Enum String Example

Enumeration for strings is similar to numeric enums, but the values are initialized at compile time.

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

TypeScript Enum Examples

We will now walk through different examples using the enum keyword.

  • How to Iterate Elements of an Enumeration in TypeScript? You can iterate through all the elements of an enum using a for loop:

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

    output:

    January;
February;
March;

How to Convert String to Enumeration in TypeScript?

Converting from a string to an enum or from an enum to a string is straightforward.

Enumerations by default return a numeric index.

You can look up the corresponding enum by index and return it as a string type.

enum Month {
  Jan,
  Feb,
  Mar,
}
// To String
var selectedMonth: string = Month[Month.Jan];
console.log(selectedMonth); // returns the enum value as a string

// To Enum / number
var month: Month = Month[selectedMonth];
console.log(month); // returns the enum object corresponding to the string

How to Convert Enum to Array Object in TypeScript?

Converting an enum to an array object is simple.

First, create an empty array, then iterate through the enum and push the values to the array.

let map: { code: string, name: string }[] = [];

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

Summary

In summary, you’ve learned about TypeScript enums and seen examples with explanations.