How enums works in TypeScript ? - ❤️TypeScript Tutorials In 2024

In this article, we will try to understand all the facts which are associated with enums in TypeScript.

TypeScript enum: TypeScript enums allow us to define or declare a set of named constants i.e. a collection of related values which could either be in the form of a string or number or any other data type.

Syntax: Following is the syntax that we could use to initialize an enum in TypeScript-

enum enum_name {
    // values......
}

Reason to use an enum in TypeScript:

Enums provides a great way to organize the code in TypeScript.
Enums saves compile-time and runtime with inline code in JavaScript.
Enums allow for the creation of memory-efficient custom constants in JavaScript.

How does an enum work in TypeScript?

Enums generally accept default values in numbers (starting from 0).
Although a user could change the values provided in enums according to the requirements.
Values inside enums are marked as constants so they can also be accessed but they can’t be altered or changed.
The output of a TypeScript enum is an object which we have seen in JavaScript (although JavaScript doesn’t support enums).
This object consists of named properties declared in the enum.
This object also has number keys with string values representing the named constants.
That’s why we may pass a number into a function that accepts an enum.
In other words, we may also visualize enum members as both a number and a defined constant.

Numeric Enums: Numeric enums store string values as numbers and they can be declared using the keyword enum. Following are some of the examples which would help us to understand Numeric enums in a much better and clear way-

Example: In this example, we will be creating a numeric enum that will store Cars information and further we will display some specific results using that enum.

Javascript

enum CarName {
    Honda,
    Toyota,
    Alto,
    Swift,
}
console.log(CarName);
console.log("Value of Alto is : "+ CarName.Alto);

Output:

{
  '0': 'Honda',
  '1': 'Toyota',
  '2': 'Alto',
  '3': 'Swift',
  Honda: 0,
  Toyota: 1,
  Alto: 2,
  Swift: 3
}
Value of Alto is : 2

Example: In this example, we will initialize one value inside an enum, so other values would be incremented on their own.

Javascript

enum CarName {
    Honda = 10,
    Toyota,
    Alto,
    Swift,
}
console.log(CarName);
console.log("Value of Alto is : "+ CarName.Alto);

Output:

{
  '10': 'Honda',
  '11': 'Toyota',
  '12': 'Alto',
  '13': 'Swift',
  Honda: 10,
  Toyota: 11,
  Alto: 12,
  Swift: 13
}
Value of Alto is : 12

String Enums: String enums are quite 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.

The following example will help us to understand String Enums in a much better and clear manner-

Example: In this example, we will be creating a string enum that will store all the values in the string data type.

Javascript

enum fruitsName {
    Apple = "APPLE",
    Banana = "Banana",
    Mango = "Mango",
    Papaya = "Papaya"
}
console.log(fruitsName);

console.log("Fruit name is : " + fruitsName.Apple);

Output:

{ Apple: 'APPLE', Banana: 'Banana', Mango: 'Mango', Papaya: 'Papaya' }
Fruit name is : APPLE

Heterogeneous Enums: Heterogeneous enums contain both numeric and string enums values. The following example will explain Heterogeneous enums in a much better and clear manner-

Example: In this example, we will be storing some data which is both in the form of a number as well as a string.

Javascript

enum studentDetails {
    name = "ABCD",
    age = 20,
    rollno = 12345,
    address = "XYZ Place PQR city",
    school_name = "ABCDEFG"
}
console.log(studentDetails);

Output:

{
  '20': 'age',
  '12345': 'rollno',
  name: 'ABCD',
  age: 20,
  rollno: 12345,
  address: 'XYZ Place PQR city',
  school_name: 'ABCDEFG'
}

Computed enums: Computed enums in TypeScript allow us to generate enum values dynamically based on computations or function calls. This provides greater flexibility in defining enum members, enabling more complex scenarios where enum values need to be calculated at runtime.

Example: Consider a scenario where we want to define an enum Weekdays representing the days of the week, but we want to assign values dynamically based on the current day’s index starting from Monday.

JavaScript

enum Weekdays {
    Monday = 1,
    Tuesday = Monday + 1,
    Wednesday = Tuesday + 1,
    Thursday = Wednesday + 1,
    Friday = Thursday + 1,
    Saturday = Friday + 1,
    Sunday = Saturday + 1
}

console.log(Weekdays);

Output:

{
  "1": "Monday",
  "2": "Tuesday",
  "3": "Wednesday",
  "4": "Thursday",
  "5": "Friday",
  "6": "Saturday",
  "7": "Sunday",
  "Monday": 1,
  "Tuesday": 2,
  "Wednesday": 3,
  "Thursday": 4,
  "Friday": 5,
  "Saturday": 6,
  "Sunday": 7
}

Place to use an enum: Enums should be used whenever there is a small set of fixed values available that are closely related and further these values are known at compile time.