TypeScript: Why Prefer Maps Over Enums?

While enum in TypeScript might seem like a natural choice for representing a fixed set of values, they have significant limitations that can impact code maintainability and performance. Let's examine why Map is often a better alternative.

The Problem with Enums

Enums have several major drawbacks that become apparent when developing complex applications:

1. Rigidity: Cannot be modified dynamically
2. Performance: Generates verbose JavaScript code
3. Complex typing: Difficulties with introspection and type unions
4. Bundle size: Impact on final code size

Consider this example:

typescript
1// TypeScript code
2enum Status {
3  Active = 'ACTIVE',
4  Inactive = 'INACTIVE',
5}
6
7// Transpiled JavaScript code
8var Status = {
9  Active: 'ACTIVE',
10  Inactive: 'INACTIVE',
11  ACTIVE: 'Active',
12  INACTIVE: 'Inactive',
13};
14(function (Status) {
15  Status['Active'] = 'ACTIVE';
16  Status['Inactive'] = 'INACTIVE';
17})(Status || (Status = {}));

This transpiled code generates:

• An object with mirror properties (key ↔ value)
• A superfluous IIFE (Immediately Invoked Function Expression)
• Double reference for each value
• Additional code impacting performance

The Solution with Maps

Map and TypeScript objects offer a more elegant and flexible approach:

typescript
1// Solution with const and types
2const Status = {
3  Active: 'ACTIVE',
4  Inactive: 'INACTIVE',
5} as const;
6
7// Automatically inferred type
8type Status = (typeof Status)[keyof typeof Status];
9
10// Simple and efficient transpiled code
11const Status = {
12  Active: 'ACTIVE',
13  Inactive: 'INACTIVE',
14};

Advantages of Maps

1. Type-safety

typescript
1function processStatus(status: Status) {
2  // Compilation error if invalid status
3  console.log(status);
4}
5
6// Runtime validation
7const isValidStatus = (status: string): status is Status =>
8  Object.values(Status).includes(status as Status);

2. Extensibility

typescript
1// Dynamic addition possible
2const ExtendedStatus = {
3  ...Status,
4  Pending: 'PENDING' as const,
5};

3. Advanced Patterns

typescript
1// Associated configuration
2const StatusConfig = {
3  [Status.Active]: {
4    color: 'green',
5    label: 'Active',
6    icon: 'check',
7  },
8  [Status.Inactive]: {
9    color: 'red',
10    label: 'Inactive',
11    icon: 'cross',
12  },
13} as const;
14
15// Utility type
16type StatusConfig = {
17  [K in Status]: {
18    color: string;
19    label: string;
20    icon: string;
21  };
22};
23
24// Typed helper function
25function getStatusConfig(status: Status) {
26  return StatusConfig[status];
27}

Practical Use Cases

1. API Endpoints

typescript
1const ApiEndpoints = {
2  Users: '/api/users',
3  Products: '/api/products',
4  Orders: '/api/orders',
5} as const;
6
7type Endpoint = (typeof ApiEndpoints)[keyof typeof ApiEndpoints];
8
9// Automatic URL typing
10function fetchData(endpoint: Endpoint) {
11  return fetch(endpoint);
12}

2. State Management

typescript
1const LoadingState = {
2  Idle: 'IDLE',
3  Loading: 'LOADING',
4  Success: 'SUCCESS',
5  Error: 'ERROR',
6} as const;
7
8type LoadingState = typeof LoadingState[keyof typeof LoadingState];
9
10function handleState(state: LoadingState) {
11  switch (state) {
12    case LoadingState.Loading:
13      return <Spinner />;
14    case LoadingState.Error:
15      return <ErrorMessage />;
16    // TypeScript checks exhaustiveness
17  }
18}

Detailed Comparison Table

A detailed comparison between Enums and Maps:

Type-safety

• Enum: Basic (✓)
• Map: Advanced with type inference (✓✓)

Runtime performance

• Enum: Less performant (✗)
• Map: More performant (✓)

Bundle size

• Enum: Larger (✗)
• Map: Smaller (✓)

Extensibility

• Enum: Hard to extend (✗)
• Map: Easily extensible (✓)

Introspection

• Enum: Limited capabilities
• Map: Full capabilities

TypeScript strict compatibility

• Enum: Compatible (✓)
• Map: Fully compatible with more features (✓✓)

Maintenance

• Enum: More complex to maintain
• Map: Easier to maintain

Best Practices

1. Explicit Naming

typescript
1// Preferred
2const HttpStatus = {
3  Ok: 200,
4  NotFound: 404,
5  ServerError: 500,
6} as const;
7
8// Avoid
9const Status = {
10  a: 200,
11  b: 404,
12  c: 500,
13} as const;

2. Union Types

typescript
1// Creating type-safe unions
2type HttpSuccessStatus = 200 | 201 | 204;
3type HttpErrorStatus = 400 | 401 | 404 | 500;
4type HttpStatus = HttpSuccessStatus | HttpErrorStatus;

3. Runtime Validation

typescript
1function isHttpSuccess(status: number): status is HttpSuccessStatus {
2  return [200, 201, 204].includes(status);
3}

Conclusion

Maps offer a more robust alternative to enums with:

• More precise and flexible typing
• Better runtime performance
• Simplified maintenance
• Better compatibility with the JavaScript ecosystem

To deepen your understanding of these concepts, check out:

• TypeScript Documentation
• TypeScript Handbook
• TypeScript Deep Dive

Feel free to contribute to this article by sharing your experiences!