Skip to content
intermediatePhase 35 · TypeScript

Enums

Define enumerated constants with numeric and string enum patterns.

30m
0 problems
Topic Progress0%

Numeric Enums

Numeric Enums

Enums define a set of named constants. Numeric enums default to sequential numbers starting from 0.

Basic Numeric Enum

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

let dir: Direction = Direction.Up;
console.log(dir); // 0

Custom Values

enum HttpStatus {
  OK = 200,
  NotFound = 404,
  ServerError = 500
}

function handleResponse(status: HttpStatus) {
  if (status === HttpStatus.OK) {
    console.log("Success");
  }
}

Computed Values

enum Color {
  Red,
  Green = Red + 1,
  Blue = Green * 2
}

// Red = 0, Green = 1, Blue = 2

Reverse Mapping

enum Direction {
  Up,
  Down,
  Left,
  Right
}

// Forward: number to string
let dirName = Direction[0]; // "Up"

// Reverse: string to number
let dirValue = Direction["Up"]; // 0

String Enums

String Enums

String enums provide better readability and debugging experience.

Basic String Enum

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

let dir: Direction = Direction.Up;
console.log(dir); // "UP"

Benefits

  • Better debugging output
  • Self-documenting code
  • No reverse mapping needed

Real-World Example

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING"
}

enum Priority {
  Low = "LOW",
  Medium = "MEDIUM",
  High = "HIGH"
}

type Task = {
  id: number;
  title: string;
  status: Status;
  priority: Priority;
};

const task: Task = {
  id: 1,
  title: "Learn TypeScript",
  status: Status.Active,
  priority: Priority.High
};

Const Enums

Const Enums

Const enums are fully inlined during compilation, resulting in better performance.

Basic Const Enum

const enum Direction {
  Up,
  Down,
  Left,
  Right
}

let dir = Direction.Up;
// Compiles to: let dir = 0;

String Const Enum

const enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE"
}

let status = Status.Active;
// Compiles to: let status = "ACTIVE";

Benefits

  • No generated JavaScript code
  • Fully inlined at compile time
  • Better performance
  • Smaller bundle size

Limitations

  • Cannot be used with dynamic values
  • No reverse mapping
  • Cannot be used in compute expressions
const enum Direction {
  Up,
  Down,
  Left,
  Right
}

// Cannot do this:
let dirKey = Direction[0]; // Error!

// Must use literal:
let dirKey = "Up";

Practice Problems

0/3solved
Build Enums Component

Create a reusable React component implementing Enums. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Enums Testing

Write unit and integration tests for Enums using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Enums Performance

Optimize Enums for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the default value of the first enum member?

Question 1 options

2. What are string enums better for?

Question 2 options

3. What is a const enum?

Question 3 options

4. Can const enums be used for reverse mapping?

Question 4 options

Flashcards

Question

What is an enum?

Click to reveal answer

Answer

A set of named constants

Question

What is the default value of numeric enum members?

Click to reveal answer

Answer

Sequential numbers starting from 0

Question

What is a const enum?

Click to reveal answer

Answer

An enum that is fully inlined at compile time

Question

When should you use string enums?

Click to reveal answer

Answer

When you need better debugging output and readability

Question

What is Enums?

Click to reveal answer

Answer

Enums is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.Enums define named constants
  • 2.Numeric enums default to sequential numbers
  • 3.String enums are better for debugging
  • 4.Const enums are inlined for better performance
  • 5.Only numeric enums support reverse mapping

Interview Tips

  • •Explain when to use const enums vs regular enums
  • •Know the difference between numeric and string enums
  • •Understand reverse mapping in numeric enums

Cheat Sheet

Cheat Sheet

Numeric Enum

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

String Enum

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE"
}

Const Enum

const enum Direction {
  Up, Down, Left, Right
}
let dir = Direction.Up; // 0

Reverse Mapping

enum Dir { Up, Down }
Dir[0]; // "Up"
Dir["Up"]; // 0