Typescript Enum All you need to know

A Typescript enum is a special data type that allows developers to create a variable that can take a set of predefined constants. In this article, we will explore the enum keyword in TypeScript and see how to use it to write readable and maintainable code.

Introduction to Enums in TypeScript

A Typescript enum allows us to define the collection of related values to be used by name. They make the code easier to read and maintain. You may use them to limit a variable’s values to a small set of possible values.

Javascript does not support enums. Hence typescript creates runtime artifacts to support them ( Except const enum which do not have a runtime artifact).

TypeScript provides both numeric and string-based enums.

Where to use Enum

There are many use cases where the enum is very useful. For Example, directions can only take four values. Northeastsouth, and west. We can use codes like N, E, S, & W to represent them. Another example is the days of the week, which you can represent as 1 to 7. Traffic lights are another example where a variable takes finite values like green, yellow, & red

The enums make the code more readable and less error-prone. For Example, using codes like 1,2, etc., to represent days of the week is less readable compared to the Weekdays.Sunday, Weekdays.Monday.

It also makes it easier to change the values in the future without breaking the code. For Example, if you decide to use the number instead of N, E, S, & W for directions, you can do so easily.

You can also use the string literal or numeric literal types and the union types. These literal types do not have runtime artifacts and hence may be preferable over the Enum. Choose one based on your preference.

Typescript Enum Examples

We define a enum by using the enum keyword, followed by the name of the enum (Weekdays). Then we define the members of the enum. Each member must have a name (Monday, Tuesday, etc.) and value (1,2, etc.). A comma separates the members. The trailing comma is allowed & ignored. If we omit the value of a member, then the TypeScript increments the value of the preceding member by one and assigns it to the current member: If the preceding member is a string, an error is thrown.

In the above example, we have initialized the values. But If we omit the values, then the typescript initializes it with the values starting from 0.

You will get nice intellisense help when you use them.

intellisense help in Typescript Enum

we can use the quote in the names of enum members, as shown below

Javascript does not support enums. The Typescript transpiles the above TypeScript code to JavaScript as follows.

enum Types in Typescript.

The Typescript enums can store a String constant, numerical constant or mix of both. There are three enum types Typescript.

  1. Numeric enums in TypeScript
  2. String enums in TypeScript
  3. Heterogeneous enums (both string & numbers) in TypeScript

Typescript enum does not support other types other than numbers and strings as its member.

Numeric Enums in TypeScript

The Numeric enum stores the values as a number. You can define a enum without assigning a value, as shown below. The Typescript automatically assigns the numeric values starting from 0. You can see from the following example that Car,plane & train get the value 0,1 & 2 respectively.

You can provide a starting number, as shown in the example below. The plane & train automatically get ( 3 & 4). i.e., the next available number.

The following example shows how to use an enum as a return type

String Enums in TypeScript

We can also use strings instead of numbers as values. The only difference is that we must initialize the values.

Use it in a function as shown below

Heterogeneous Enums in TypeScript

The Heterogeneous enums allow a mix of both string & number.

If you do not provide an initial value, the typescript will automatically assign a number incremented by one from the previous value. If the previous value is a string, it will result in an error.

For Example, Train gets the value 2 here

This results in an error Enum member must have initializer.

Computed enum in TypeScript

We can also include the members with computed values. They are allowed only in the case of numeric enums. The string & heterogeneous enums do not support computed enums.

You can use any function. The following code generates a random number from 10 to 20. Hence you will get a different number for the train on each run.

Reverse Mapping of Enum

The Typescript generates a reverse mapping for numeric enum members. For Example

The Compiler emits the following code. As you can see from the code, the compile generates both the forward mapping (VehicleType["Car"] = 0) and reverse mapping (VehicleType[0] = "Car";) is a single statement VehicleType[VehicleType["Car"] = 0] = "Car";

This means you can get the value of an enum from its name VehicleType[“Car”] or get the name of the enum from its value (VehicleType[0] )

The reverse mapping for numeric enum members works even in Heterogeneous Enums with number values, as shown below. The string enum members do not support reverse mappings.

Transpiled code.

Const Enums

If an enum is prefixed with the keyword const, it doesn’t get transpiled. i.e., no javascript code is emitted. Instead, the compiler will replace the value of its member directly in the transpiled code, wherever they are used.

Since they do not have runtime representation, you cannot use computed members.

Type Checking of enums

The Typescript performs a loose type checking when the number of members is involved. In the following example, someFn accepts VehicleTypeas an argument. But someFn also accepts any number. Invoking someFn(100) with 100 as an argument does not throw any errors.

But in the case of string enums it works as expected.

The loose checking of type exists when you mix numbers & strings as in Heterogeneous enums.


Typescript Enums

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top