Numeric enums in Typescript - Step-by-Step Execution

Concept Flow - Numeric enums

Start

↓

Define enum with numeric values

↓

Assign default or explicit numbers

↓

Use enum values in code

↓

Access enum by name or number

↓

End

This flow shows how numeric enums are defined, assigned values, and accessed in TypeScript.

Execution Sample

Typescript

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}
console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right);

Defines a numeric enum Direction with explicit and implicit values, then prints all values.

Execution Table

Step	Action	Evaluation	Result
1	Define enum Direction with Up=1	Up = 1	Direction.Up = 1
2	Assign Down without value	Down = Up + 1	Direction.Down = 2
3	Assign Left without value	Left = Down + 1	Direction.Left = 3
4	Assign Right without value	Right = Left + 1	Direction.Right = 4
5	Print Direction.Up	Direction.Up	1
6	Print Direction.Down	Direction.Down	2
7	Print Direction.Left	Direction.Left	3
8	Print Direction.Right	Direction.Right	4
9	End of execution	-	-

💡 All enum members assigned numeric values; printing completes.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Direction.Up	-	1	1	1	1	1
Direction.Down	-	-	2	2	2	2
Direction.Left	-	-	-	3	3	3
Direction.Right	-	-	-	-	4	4

Key Moments - 2 Insights

Why does Down get the value 2 even though we didn't assign it explicitly?

Because in numeric enums, if a member is not assigned a value, it gets the previous member's value plus one, as shown in execution_table step 2.

Can we access enum members by their numeric values?

Yes, TypeScript enums create a reverse mapping, so you can access the name by number, but this example focuses on numeric values only.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of Direction.Left after step 3?

A 3

B 2

C 4

D 1

💡 Hint

Check the 'Result' column in row with Step 3 for Direction.Left.

At which step does Direction.Right get its value assigned?

A Step 3

B Step 4

C Step 2

D Step 1

💡 Hint

Look at the 'Action' column for assignment of Direction.Right.

If we changed Up to 5, what would Direction.Down be after step 2?

A 5

B 1

C 6

D 4

💡 Hint

Remember that unassigned members get previous value plus one, see variable_tracker.

Concept Snapshot

Numeric enums assign numbers to names.
Start with explicit or default 0.
Unassigned members get previous + 1.
Access by name or number.
Useful for readable constants.

Full Transcript

This example shows how TypeScript numeric enums work. We define an enum Direction with Up assigned 1 explicitly. The next members Down, Left, and Right get values 2, 3, and 4 automatically because they follow Up. We print all values to see the numbers. Numeric enums let us use names instead of numbers, making code easier to read. Unassigned members get the previous member's value plus one. This is shown step-by-step in the execution table and variable tracker. Understanding this helps avoid confusion about enum values.

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