Numeric enums in Typescript

Introduction

Numeric enums let you group related numbers with names. This makes your code easier to read and understand.

When you want to name a set of related numbers, like days of the week or directions.

When you need to compare or switch between fixed numeric values with meaningful names.

When you want to avoid using 'magic numbers' directly in your code.

When you want to make your code clearer for others by using descriptive names instead of numbers.

Syntax

Typescript

enum Name {
  Member1 = 1,
  Member2,
  Member3 = 10,
  Member4
}

If you don't assign a number to the first member, it starts at 0 by default.

Members without assigned numbers get the previous member's number plus one.

Examples

Starts at 1 for Up, then Down is 2, Left is 3, Right is 4 automatically.

Typescript

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

No numbers assigned, so Ready=0, Waiting=1, Done=2 by default.

Typescript

enum Status {
  Ready,
  Waiting,
  Done
}

Red is 5, Green is 10, Blue is 11 (one more than Green).

Typescript

enum Color {
  Red = 5,
  Green = 10,
  Blue
}

Sample Program

This program defines days Monday to Friday starting at 1. It checks if a day is weekend (6 or 7). Monday prints as 1, Wednesday as 3, and Monday is not weekend.

Typescript

enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

function isWeekend(day: Weekday): boolean {
  return day === 6 || day === 7;
}

console.log(Weekday.Monday);    // 1
console.log(Weekday.Wednesday); // 3
console.log(isWeekend(Weekday.Monday)); // false

Important Notes

Numeric enums can be used in comparisons and switch statements easily.

You can get the name from the number using reverse lookup, like Weekday[1] gives 'Monday'.

Be careful to assign numbers if you want specific values; otherwise, they auto-increment.

Summary

Numeric enums give names to numbers for clearer code.

Members auto-increment if no number is assigned.

Use enums to avoid magic numbers and improve readability.

Practice

1. What is a numeric enum in TypeScript used for?

easy

A. To declare variables without types

B. To assign names to numeric values for better code clarity

C. To define functions with numeric parameters

D. To create string-only constants

Solution

1. Step 1: Understand enum purpose

   Numeric enums give meaningful names to numbers, making code easier to read.

2. Step 2: Compare options

   Only To assign names to numeric values for better code clarity correctly describes numeric enums as naming numbers for clarity.

3. Final Answer:

   To assign names to numeric values for better code clarity -> Option B

4. Quick Check:

   Numeric enums = named numbers [OK]

Hint: Enums name numbers to avoid magic numbers [OK]

Common Mistakes:

• Confusing enums with string constants
• Thinking enums declare variables
• Assuming enums define functions

2. Which of the following is the correct syntax to declare a numeric enum in TypeScript?

easy

A. enum Colors { Red = 1, Green, Blue }

B. enum Colors = { Red: 1, Green: 2, Blue: 3 }

C. enum Colors (Red = 1, Green, Blue)

D. enum Colors { Red: 1; Green; Blue }

Solution

1. Step 1: Recall enum syntax

   TypeScript enums use curly braces with members separated by commas, and assignment uses '='.

2. Step 2: Check each option

   enum Colors { Red = 1, Green, Blue } uses correct syntax: enum name, braces, members with '=' and commas.

3. Final Answer:

   enum Colors { Red = 1, Green, Blue } -> Option A

4. Quick Check:

   Correct enum syntax uses braces and '=' [OK]

Hint: Use braces and '=' for enum members [OK]

Common Mistakes:

• Using '=' after enum name
• Using colons instead of '=' for values
• Separating members with semicolons

3. What will be the output of this code?

enum Status {
  Ready = 3,
  Waiting,
  Done
}
console.log(Status.Waiting);

medium

A. 3

B. 5

C. 4

D. undefined

Solution

1. Step 1: Understand enum auto-increment

   Ready is set to 3, so Waiting becomes 4, and Done becomes 5 automatically.

2. Step 2: Identify logged value

   console.log(Status.Waiting) prints 4, the auto-incremented value after 3.

3. Final Answer:

   4 -> Option C

4. Quick Check:

   Auto-increment after 3 = 4 [OK]

Hint: Next enum value auto-increments by 1 [OK]

Common Mistakes:

• Assuming Waiting equals 3
• Thinking enum values reset automatically
• Expecting string output

4. Identify the error in this enum declaration:

enum Direction {
  Up = 1,
  Down = 2
  Left = 3,
  Right = 4
}

medium

A. Cannot mix assigned and unassigned members

B. Enum members cannot have assigned values

C. Enum name must be lowercase

D. Missing comma after Down = 2

Solution

1. Step 1: Check enum member separators

   Enum members must be separated by commas. After 'Down = 2' there is no comma.

2. Step 2: Validate other rules

   Assigned values are allowed, enum names can be uppercase, and mixing assigned/unassigned is allowed.

3. Final Answer:

   Missing comma after Down = 2 -> Option D

4. Quick Check:

   Enum members need commas [OK]

Hint: Check commas between enum members [OK]

Common Mistakes:

• Forgetting commas between members
• Thinking enum names must be lowercase
• Believing all members must be unassigned

5. Given this enum:

enum Levels {
  Low = 1,
  Medium = Low * 2,
  High = Medium + 2
}

What is the value of Levels.High?

hard

A. 4

B. 6

C. 5

D. 8

Solution

1. Step 1: Calculate Medium value

   Medium = Low * 2 = 1 * 2 = 2.

2. Step 2: Calculate High value

   High = Medium + 2 = 2 + 2 = 4.

3. Step 3: Re-check calculations

   Medium is 2, High is 4. This is correct.

4. Step 4: Confirm enum constant expressions

   TypeScript allows constant expressions. Low=1, Medium=2, High=4.

5. Final Answer:

   4 -> Option A

6. Quick Check:

   Levels.High = 4 [OK]

Hint: Calculate enum expressions step-by-step [OK]

Common Mistakes:

• Ignoring expression evaluation order
• Assuming High equals Medium + Low
• Confusing enum values with indexes