Reader Level:
ARTICLE

Enum in TypeScript

Posted by Sharad Gupta Articles | TypeScript December 07, 2012
In this article I am going to explain how to use enum in TypeScript.
  • 0
  • 0
  • 10310

TypeScript Enum

An Enum is a set of named constants. It provides a way to create symbolic constants, especially for a set of related constants, such as the day of the week (Monday, Tuesday and soon...) or say an enum stores special values. They make a program simpler and improve readability.

Example of enum

In this example, we see an enum type that indicates the importance of something.

The following examples show the use of an enum in TypeScript, use the following to create a program using enum.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of  your application like "app", then click on the Ok button.

Step 2

After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, css file and html files.

Step 3

The code of enum program.


app.ts

enum days {  sun =1, mon, tue, wed, thu, fri, sat     }

 class abc {

     function ()

     {

         var x: number = days.sat;

         var y: number = days.tue;

         document.write("Sat=" + x + "</br>Tue=" + y);

     }

}

 window.onload = () =>{

     var call = new abc();

     call.function();
 }

Step 4

Output

enum-in-typescript.jpg

Why we use enum?

Reduces errors caused by transposing or mistyping a number.

Makes it easy to change values in the future.

Enums are not allocated in memory. They exists only during compilation.

Since you will get an error during compile time itself, not run time, it is better and a best practice.

Languages that do not have an enumerator feature often rely on error-prone and unclear schema for representing groups of constants.
 

enum color { red, green, blue, white, yellow }

 class abc {

   

       abc(wall: color)

     {

             

           if (wall==color.red) // clear and self describing

           {

               document.write("Color of wall is red.");

           }

           if (wall == 0)//unclear that 0 indicates red

           {

            document.write("</br>Color of wall is also red.");   

           }

     }

}

 window.onload = () =>{

     var call = new abc();

     call.abc(0);
 }

Note: In the above example color is the name of a new custom made type. It is called an enumeration. By using the dot . operator, "color.red" is a symbolic constant for int or say the number value 0. "color.green" is a symbolic constant for the number value 1 and so on . These  symbolic constants are called enumerators or numbers of the enumeration. The number or int values start from 0 and increment by 1 (0,1,2,3....so on) for each enumeration number by default. Here "color.red" has the int value 0 so both conditions are true.

Output

enum1-in-typescript.jpg


Here, I have a five colors in the enum, 0 (by defaule enum variables values start from zero however you can change that depending on your requriements) stands for red, 1 stands for green, 2 stands for blue and so on. If you want to decide the color of a wall then now see two given conditions:

if(wall==1) // condition 1

instead  of

if(wall==color.green) // condition 2

Condition 2 is more better than 1, because it is self describing and clear.

Summary

The latter is much clearer and understandable. To improve the clarity and self-documention and to reduce the probability of invalid values in your source code, use enumerations when you know all possible values of a variable before the program is compiled.

COMMENT USING

Trending up