Numeric enums in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a numeric enum named Direction.

Typescript

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

Drag options to blanks, or click blank then click option'

A1

B0

C'Up'

D"Up"

Attempts:

3 left

💡 Hint

Common Mistakes

Using string values instead of numbers for numeric enums.

Forgetting that numeric enums start at 0 by default.

The first member of a numeric enum defaults to 0 if not assigned. Here, we explicitly assign 0 to Up.

2fill in blank

medium

Complete the code to get the numeric value of Direction.Left.

Typescript

let leftValue: number = Direction.[1];

Drag options to blanks, or click blank then click option'

ALeft

BRight

CUp

DDown

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong enum member name.

Using string values instead of enum members.

To get the numeric value of the enum member Left, use Direction.Left.

3fill in blank

hard

Fix the error in the code to get the enum member name from its numeric value.

Typescript

let directionName: string = Direction[[1]];

Drag options to blanks, or click blank then click option'

ADirection.Left

B'Left'

C2

D"Left"

Attempts:

3 left

💡 Hint

Common Mistakes

Using string keys instead of numeric keys to index the enum.

Using enum member references instead of numbers.

To get the name of the enum member from its numeric value, use the numeric index, here 2 for Left.

4fill in blank

hard

Fill both blanks to declare a numeric enum with custom starting value and get its member value.

Typescript

enum Status {
  Active = [1],
  Inactive,
  Pending
}

let activeValue = Status.[2];

Drag options to blanks, or click blank then click option'

A5

BActive

CInactive

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 instead of 5 for the starting value.

Accessing the wrong enum member.

Assign 5 to Active to start numbering at 5. Then access Status.Active to get its value.

5fill in blank

hard

Fill all three blanks to create a numeric enum and get the name of a member by its value.

Typescript

enum Color {
  Red = [1],
  Green,
  Blue
}

let colorValue = Color.[2];
let colorName = Color[[3]];

Drag options to blanks, or click blank then click option'

A10

BGreen

C11

DRed

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong numeric values for enum members.

Mixing up member names and values.

Start enum at 10 for Red, so Green is 11. Access Color.Green for value 11, then Color[11] returns 'Green'.

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