TypeScript Enums

Enums in TypeScript provide a way to define a set of named constants, making code easier to read and understand. They’re especially useful when you need a collection of related values that won’t change, such as days of the week or status codes. This guide covers everything you need to know about TypeScript enums, from basic syntax to advanced usage and real-world applications.

Table of Contents

1. Introduction to TypeScript Enums
2. What is an Enum in TypeScript?
3. Declaring Enums
• Numeric Enums
• String Enums
4. Accessing Enum Values and Keys
5. Computed and Constant Enums
6. Using Enums in Functions and Logic
7. Real-World Examples of Using Enums
8. Key Takeaways
9. Summary

Introduction to TypeScript Enums

Enums (short for “enumerations”) in TypeScript provide a way to define named constants, creating a type-safe way to work with a fixed set of values. Enums can represent both numeric and string values, giving you flexibility in how they are used. This guide will walk you through everything from the basics to advanced applications, making it easy to integrate enums into your TypeScript projects.

What is an Enum in TypeScript?

An enum is a way to create a collection of related values, each with its own name. Enums in TypeScript can be of two types: numeric and string. They allow you to use friendly names to refer to fixed values, making your code easier to read and reducing errors caused by using “magic numbers” or strings.

enum Status {
  Pending,
  InProgress,
  Completed
}

In this example:

• Status is an enum with three possible values: Pending, InProgress, and Completed.
• Each value represents a unique constant, making it easier to use and understand in your code.

Declaring Enums

Enums in TypeScript can be declared in two ways: as numeric enums and as string enums.

Numeric Enums

Numeric enums are the default in TypeScript. When you declare a numeric enum, each member is assigned a numeric value starting from 0 by default, and each subsequent member’s value is incremented by 1.

enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

console.log(Direction.Up);    // Output: 0
console.log(Direction.Right); // Output: 3

In this example:

• Direction is a numeric enum where Up is assigned 0, Down is assigned 1, and so on.
• TypeScript automatically increments values, making it easy to create ordered sets.

Custom Numeric Values

You can assign custom values to enum members, and TypeScript will continue incrementing from the specified value.

enum Role {
  Admin = 1,
  User = 5,
  Guest    // 6 (incremented automatically)
}

console.log(Role.Admin); // Output: 1
console.log(Role.Guest); // Output: 6

Here:

• Role has custom values, where Admin starts at 1, and User is 5.
• Guest is automatically assigned 6, continuing from User.

String Enums

String enums allow you to assign meaningful names as values to the enum members instead of numeric values. This is useful when the values themselves convey information.

enum Status {
  Pending = "PENDING",
  InProgress = "IN_PROGRESS",
  Completed = "COMPLETED"
}

console.log(Status.Pending); // Output: PENDING

In this example:

• Status is a string enum with each member assigned a specific string value.
• String enums improve readability and avoid accidental assignments, as you must use the exact string.

Accessing Enum Values and Keys

You can access enum values and keys in TypeScript using dot notation. TypeScript enums are bi-directional for numeric enums, meaning you can get the name of an enum by its value and vice versa.

Accessing Enum Values by Key

enum Days {
  Monday,
  Tuesday,
  Wednesday
}

console.log(Days.Monday); // Output: 0
console.log(Days.Tuesday); // Output: 1

Accessing Enum Names by Value (Numeric Enums Only)

With numeric enums, you can use the value to get the key.