TypeScript Enum A Complete Tutorial on Enums in TypeScript

TypeScript Enum: A Complete Tutorial on Enums in TypeScript

by

What is enum in TypeScript?

Enumerations, also known as enums, are a new kind of data type that TypeScript supports.

Many object-oriented programming languages, such as Java and C#, utilize enums, and this feature is now accessible in TypeScript as well.

To put it simply, enums enable us to define a group of named constants. It means we can create a collection of values that are related and can be either numeric or string-based.

TypeScript Enum can be categorized into three types.

  1. Numeric enum
  2. String enum
  3. Heterogeneous enum

1. Numeric enum

Numeric enums are types of enums that use numbers.

This means they keep text values as numbers. We can create enums using the word “enum”.

For example:

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

As you can see in our example above, we have an enum named DaysOfWeek.

The enum has seven (7) values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday.

In this case, the enum values begin at zero and increase by one for each item.

It would look like this:

enum DaysOfWeek {
    Sunday = 0,
    Monday = 1,
    Tuesday = 2,
    Wednesday = 3,
    Thursday = 4,
    Friday = 5,
    Saturday = 6
}

In this example, DaysOfWeek is a numeric enum. Sunday is initialized with 0, and the rest of the members (Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday) are auto-incremented from that point on.

So, Monday will be 1, Tuesday will be 2, Wednesday will be 3, and so on until Saturday which will be 6.

This is how numeric enums in TypeScript store text values (in this case, days of the week) as numbers. Each day of the week is associated with a number, starting from 0 for Sunday to 6 for Saturday.

Apart from that, we can also choose to set the first number value ourselves.

For instance, we could write the same enum like this:

enum DaysOfWeek {
    Sunday = 1,
    Monday = 3,
    Tuesday = 5,
    Wednesday = 7,
    Thursday = 9,
    Friday = 11,
    Saturday = 15
}

We can use the enum as an input or output for a function parameter, like this:

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

function getDay(dayName: string): DaysOfWeek {
    if (dayName === 'Monday' || dayName === 'Tuesday') {
        return DaysOfWeek.Monday;
    }
}

let dayType: DaysOfWeek = getDay('Monday'); 

// Display the output
console.log(DaysOfWeek[dayType]);

Output:

Monday

Moreover, the Numeric enums can have members whose values are calculated.

The value of an enum member can be a fixed number or a calculated one.

The next enum shows members with calculated values.

enum DaysOfWeek {
    Sunday = 1,
    Monday = Sunday * 2,
    Tuesday = Monday * 2,
    Wednesday = Tuesday * 2,
    Thursday = Wednesday * 2,
    Friday = Thursday * 2,
    Saturday = Friday * 2
}

// Display the output
console.log('Sunday:', DaysOfWeek.Sunday);
console.log('Monday:', DaysOfWeek.Monday);
console.log('Tuesday:', DaysOfWeek.Tuesday);
console.log('Wednesday:', DaysOfWeek.Wednesday);
console.log('Thursday:', DaysOfWeek.Thursday);
console.log('Friday:', DaysOfWeek.Friday);
console.log('Saturday:', DaysOfWeek.Saturday);

Output:

Sunday: 1
Monday: 2
Tuesday: 4
Wednesday: 8
Thursday: 16
Friday: 32
Saturday: 64

2. String enum

TypeScript Enums also contain strings. This is seen more often than numeric enums because they’re easier to read and understand.

String enums are like numeric enums, but they start with string values instead of numbers.

Using string enums is beneficial because they’re easier to read. If we need to debug a program, it’s simpler to understand string values than number values.

For example:

enum DaysOfWeek {
    Sunday = "Sunday" ,
    Monday = "Monday",
    Tuesday = "Tuesday",
    Wednesday = "Wednesday",
    Thursday = "Thursday",
    Friday = "Friday" ,
    Saturday = "Saturday"
}

console.log(DaysOfWeek.Sunday);
console.log(DaysOfWeek.Monday);
console.log(DaysOfWeek.Tuesday);
console.log(DaysOfWeek.Wednesday);
console.log(DaysOfWeek.Thursday);
console.log(DaysOfWeek.Friday);
console.log(DaysOfWeek.Saturday);

Output:

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

3. Heterogeneous enum

Heterogeneous enums are a type of enum that includes both numeric and string values.

For example:

enum SampleMixedEnum {
    Age = 18,
    Name = "SourceCode"
}

In our given example above, SampleMixedEnum is a heterogeneous enum that contains both a numeric value (Age = 18and a string value (Name = “SourceCode”).

This is less common and generally not recommended because it can lead to confusion. It’s usually better to keep all the values in an enum of the same type for consistency and predictability.

However, TypeScript does allow this if you have a specific need for it.

Conclusion

Enums in TypeScript are a versatile data type that can hold a set of named constants, which can be either numeric or string values.

Understanding and using these different types of enums can enhance the efficiency and readability of your TypeScript code.

I hope that this article helps you understand the TypeScript Enum.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

Leave a Comment