String enums in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a string enum named Color with a member Red assigned to the string "RED".

Typescript

enum Color {
  Red = [1]
}

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

A"RED"

BRED

C'Red'

DRed

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the string value.

Using the enum member name without quotes as the value.

In TypeScript, string enum members must be assigned string literals, so Red = "RED" is correct.

2fill in blank

medium

Complete the code to access the string value of the enum member Color.Green.

Typescript

enum Color {
  Green = "GREEN"
}

const greenValue: string = [1];

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

AColor[Green]

BColor.Green

CColor.Green()

DColor['Green']()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call the enum member as a function.

Using bracket notation without quotes.

To get the string value of an enum member, use dot notation like Color.Green.

3fill in blank

hard

Fix the error in the enum declaration by completing the code to assign string values correctly.

Typescript

enum Direction {
  Up = [1],
  Down = "DOWN"
}

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

AUP

BUp

C"UP"

D'Up'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted identifiers as string values.

Mixing single and double quotes inconsistently.

Enum string members must be assigned string literals with quotes, so Up = "UP" is correct.

4fill in blank

hard

Fill both blanks to create a string enum Status with members Active and Inactive assigned to "ACTIVE" and "INACTIVE" respectively.

Typescript

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

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

A"ACTIVE"

B"INACTIVE"

C'INACTIVE'

D'ACTIVE'

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes inconsistently.

Swapping the values between members.

Enum members must be assigned string literals. Here, Active is assigned "ACTIVE" and Inactive is assigned "INACTIVE".

5fill in blank

hard

Fill all three blanks to create a string enum Response with members Yes, No, and Maybe assigned to "YES", "NO", and "MAYBE" respectively.

Typescript

enum Response {
  Yes = [1],
  No = [2],
  Maybe = [3]
}

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

A"NO"

B"YES"

C"MAYBE"

D"NOPE"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the string values for members.

Using incorrect strings like "NOPE".

Assign the correct string literals to each enum member as specified: Yes = "YES", No = "NO", and Maybe = "MAYBE".

Practice

1. What is a key benefit of using string enums in TypeScript?

easy

A. They group related string constants under named values for clarity.

B. They automatically assign numeric values to members.

C. They allow mixing numbers and strings without errors.

D. They eliminate the need to declare enum members explicitly.

Solution

1. Step 1: Understand string enums purpose

   String enums group related string values under named constants to improve code clarity and safety.

2. Step 2: Compare options

   Only They group related string constants under named values for clarity. correctly describes this benefit. Numeric auto-assignment and mixing types are not features of string enums.

3. Final Answer:

   They group related string constants under named values for clarity. -> Option A

4. Quick Check:

   String enums improve clarity = A [OK]

Hint: String enums give names to strings for clearer code [OK]

Common Mistakes:

• Confusing string enums with numeric enums
• Thinking enum members can be implicit strings
• Assuming enums mix string and number types

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

easy

A. const enum Colors { Red = RED, Green = GREEN, Blue = BLUE }

B. enum Colors { Red, Green, Blue }

C. enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' }

D. enum Colors = { Red: 'RED', Green: 'GREEN', Blue: 'BLUE' }

Solution

1. Step 1: Review string enum syntax

   String enums require explicit string values assigned to each member using = 'value' inside an enum block.

2. Step 2: Check each option

   enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' } correctly uses enum Colors { Red = 'RED', ... }. enum Colors { Red, Green, Blue } lacks string assignments. enum Colors = { Red: 'RED', Green: 'GREEN', Blue: 'BLUE' } uses invalid syntax with = outside enum. const enum Colors { Red = RED, Green = GREEN, Blue = BLUE } misses quotes around string values.

3. Final Answer:

   enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' } -> Option C

4. Quick Check:

   String enum syntax = D [OK]

Hint: String enums need explicit string values with quotes [OK]

Common Mistakes:

• Omitting string values for enum members
• Using object literal syntax instead of enum
• Missing quotes around string values

3. What will be the output of this TypeScript code?

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

console.log(Direction.Left);

medium

A. 3

B. "LEFT"

C. Left

D. undefined

Solution

1. Step 1: Understand enum member values

   Each member in the string enum has an explicit string value, e.g., Left = "LEFT".

2. Step 2: Check console.log output

   Logging Direction.Left prints the string value assigned, which is "LEFT".

3. Final Answer:

   "LEFT" -> Option B

4. Quick Check:

   Enum member value = "LEFT" [OK]

Hint: Enum member prints assigned string value, not name or index [OK]

Common Mistakes:

• Expecting member name instead of value
• Confusing string enums with numeric enums
• Assuming enum members print numeric indexes

4. Identify the error in this string enum declaration:

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

medium

A. Enum name Status is invalid

B. Enum members cannot have different string values

C. Enum must use numeric values only

D. Missing quotes around ACTIVE in Active member

Solution

1. Step 1: Check string enum member values

   String enum members must have explicit string values in quotes, e.g., "ACTIVE".

2. Step 2: Identify error in Active member

   The Active member uses ACTIVE without quotes, causing a reference error.

3. Final Answer:

   Missing quotes around ACTIVE in Active member -> Option D

4. Quick Check:

   String values need quotes = A [OK]

Hint: Always put string enum values inside quotes [OK]

Common Mistakes:

• Forgetting quotes around string values
• Mixing string and numeric enum members
• Assuming enum names have restrictions

5. Given this string enum:

enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST"
}

Which code snippet correctly checks if a variable r is a valid Role value?

hard

A. if (Object.values(Role).includes(r)) { /* valid */ }

B. if (r in Role) { /* valid */ }

C. if (r === Role) { /* valid */ }

D. if (Role[r]) { /* valid */ }

Solution

1. Step 1: Understand enum value checking

   To check if r is a valid enum value, compare it against the enum's values, not keys.

2. Step 2: Evaluate each option

   if (Object.values(Role).includes(r)) { /* valid */ } uses Object.values(Role).includes(r), correctly checking if r matches any enum string value. if (r in Role) { /* valid */ } checks keys, not values. if (r === Role) { /* valid */ } compares a string to the enum object itself. if (Role[r]) { /* valid */ } tries to index enum with string value, which fails.

3. Final Answer:

   if (Object.values(Role).includes(r)) { /* valid */ } -> Option A

4. Quick Check:

   Check enum values with Object.values() = B [OK]

Hint: Use Object.values(enum).includes(value) to check string enums [OK]

Common Mistakes:

• Checking keys instead of values
• Comparing value directly to enum object
• Using enum indexing with string values