TypeScript enum guide: get started in 5 minutes

Enumerations (or enums) are a supported data type in TypeScript. Enums are used in most object-oriented programming languages like Java and C# and are now available in TypeScript too. They are one of the few features of TypeScript which isnt a type-level extension of JavaScript. Enums allow you to define a set of named constants. Using them makes it easier to document intent or create a set of distinct cases. Today, well explore the basics of TypeScript enums along with use cases, various enum types, and next steps for your learning.

Well cover:

• What is enum in TypeScript?
• Why use enums in TypeScript?
• Enums vs. alternatives
• Numeric enums
• String enums
• Heterogeneous enums
• Reverse mapping with enums
• Const enums
• Computed enums
• What to learn next

What is enum in Typescript?

TypeScript enums allow you to define a set of named constants. Using them can make it easier to document intent or to create a set of distinct cases. Many programming languages, like C, C#, and Java, have an enum data type, but JavaScript doesnt. However, TypeScript does. TypeScript has both numeric and string-based enums.

The syntax for enums is as follows:

enum States {    Oregon,    Washington,    Idaho,    Montana,    Wyoming}// usage var region = States.Washington;

Before we look more closely at a few different enum types, lets discuss the benefits of enums in TypeScript.

Why use enums in TypeScript?

Enums are a great way to organize your code in TypeScript. Lets look at some pros:

• Provides flexibility making it easier to express and document intentions and use cases
• Saves compile-time and runtime with inline code in JavaScript
• Allows for the creation of memory-efficient custom constants in JavaScript
• Etc.

Enums vs. alternatives

While there are many benefits of using TypeScript enums, there are some times you shouldnt use them, such as:

• Reassigning or changing enum member values: enums are type-safe and would return compile errors on reassignment
• Recording dynamic values: enums are suited for finite items and help to create a user-defined constants system
• Using variables: enums cant be used as variables and doing so would return errors

Now, lets dive deeper into some enum types.

Numeric enums

Numeric enums store string values as numbers. They can be defined using the enum keyword. Lets say you wanted to store a set of different types of cars. The following example shows a numeric enum in TypeScript:

enum CarType {    Honda,    Toyota,    Subaru,    Hyundai}

The enum value CarType has four values: Honda, Toyota, Subaru, and Hyundai. Enum values start from zero and increment by one for each member, which would look something like this:

Honda = 0Toyota = 1Subaru = 2Hyundai = 3

If you want, you can initialize the first numeric value yourself like this:

enum CarType {    Honda = 1,    Toyota,    Subaru,    Hyundai}

In the above example, we initialized the first member Honda with the numeric value of one. The remaining numbers will be incremented by one.

Note: Its not necessary to assign sequential values to your enum members. You can assign them any values you want.

String enums

String enums are similar to numeric enums, but their enum values are initialized with string values instead of numeric values. String enums have better readability than numeric enums, making it easier to debug your programs.

The following example uses the same info as the numeric enum example, but is represented as a string enum:

enum CarType {    Honda = "HONDA",    Toyota = "TOYOTA",    Subaru = "SUBARU",    Hyundai = "HYUNDAI"}// Access String EnumCarType.Toyota; //returns TOYOTACarType['Honda']; //returns HONDA

In the example, we defined the string enum CarType with the same values as the numeric enum, except the enum values are initialized as string literals.

Note: String enum values need to be individually initialized.

Heterogeneous enums

Heterogeneous enums contain both numeric and string values. Heres an example:

enum BooleanHeterogeneousEnum {    Yes = 0,    No = "NO",}

Reverse mapping with enums

You know that num values can be retrieved using their corresponding enum member values. With reverse mapping, you can access the value of a member and a member name from its value. Lets look at an example:

enum CarType {    Honda = 1,    Toyota,    Subaru,    Hyundai}CarType.Subaru; // returns 3CarType["Subaru"]; // returns 3CarType[3]; // returns Subaru

CarType[3] returns its member name Subaru because of reverse mapping. Lets look at another example:

enum CarType {    Honda = 1,    Toyota,    Subaru,    Hyundai}console.log(CarType)

You would see the following output in your browser console:

{    '1': 'Honda',    '2': 'Toyota',    '3': 'Subaru',    '4': 'Hyundai',    Honda: 1,    Toyota: 2,    Subaru: 3,    Hyundai: 4}

Each value of the enum appears two times in the internally stored enum object.

Const enums

You can use const enums to improve the performance of your numeric enums. They are defined using the const modifier:

const enum Enum {    X = 1    Y = X * 2,}

Unlike regular enums, const enums are completely removed during compilation. They can only use constant enum expressions and are inlined at use sites.

Computed enums

The value of an enum member can be a constant value or a computed value. The following example includes computed values:

enum CarType {    Honda = 1,    Toyota = getCarTypeCode('toyota'),    Subaru = Toyota * 3,    Hyundai = 10}function getCarTypeCode(carName: string): number {    if (carName === 'toyota') {        return 5;    }}CarType.Toyota; // returns 5CarType.Subaru; // returns 15

If the enum includes both computed and constant members, then uninitiated enum members either come first or after other initialized members with numeric constants. This next example will show an error:

enum CarType {    Toyota = getCarTypeCode('toyota'),    Honda, // Error: Enum member must have initializer    Subaru,    Hyundai = Toyota * 3,}

You can declare the above enum like this:

enum CarType {    Honda,    Hyundai,    Toyota = getCarTypeCode('toyota'),    Subaru = Toyota * 3

What to learn next

TypeScript provides many advantages for client-side developers. Its easier to pick up than some other alternatives because you can jump in with a JavaScript background. TypeScript enums make it easier to document intent or to create a distinct set of cases.

Now that you know more about different TypeScript enums and their benefits, youre ready to learn more about advanced TypeScript concepts. Some recommended topics to cover next are:

• Strict types
• Generic functions
• Mapped types
• And much more

To get started learning these concepts, check out Educatives text-based course, Advanced TypeScript Masterclass. In this course, youll explore the advanced features of TypeScript with in-browser coding exercises. By the end, youll be more confident in your advanced TypeScript skills, and youll be ready to apply them to your next project.

Happy learning!

Continue reading about TypeScript

• TypeScript Tutorial: A step-by-step guide to learn TypeScript
• Understanding Advanced Concepts in TypeScript
• Top 50 TypeScript Interview Questions Explained