String enums in Typescript - Step-by-Step Execution

Concept Flow - String enums

Define enum with string values

↓

Use enum member in code

↓

Access string value of enum member

↓

Use string value for comparison or output

↓

End

This flow shows how a string enum is defined, used, and accessed in TypeScript.

Execution Sample

Typescript

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

console.log(Direction.Up);

Defines a string enum Direction and prints the string value of Direction.Up.

Execution Table

Step	Action	Evaluation	Result
1	Define enum Direction with string values	Direction.Up = "UP", Direction.Down = "DOWN", Direction.Left = "LEFT", Direction.Right = "RIGHT"	Enum Direction created with string values
2	Access Direction.Up	Direction.Up	"UP"
3	Print Direction.Up	console.log(Direction.Up)	Output: UP
4	End of code execution	-	-

💡 Code ends after printing the string value of Direction.Up

Variable Tracker

Variable	Start	After 1	After 2	Final
Direction.Up	undefined	"UP"	"UP"	"UP"
Direction.Down	undefined	"DOWN"	"DOWN"	"DOWN"
Direction.Left	undefined	"LEFT"	"LEFT"	"LEFT"
Direction.Right	undefined	"RIGHT"	"RIGHT"	"RIGHT"

Key Moments - 2 Insights

Why does Direction.Up have the value "UP" instead of a number?

Because this is a string enum, each member is explicitly assigned a string value, not a number. See execution_table step 1 where the enum members get string values.

Can I compare Direction.Up directly to the string "UP"?

Yes, since Direction.Up equals the string "UP", you can compare them directly. This is shown in execution_table step 2 where Direction.Up evaluates to "UP".

Visual Quiz - 3 Questions

Look at the execution table, what is the value of Direction.Left after step 1?

A undefined

B "LEFT" (number)

C "LEFT"

D null

💡 Hint

Check variable_tracker row for Direction.Left after step 1

At which step is the string "UP" printed to the console?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at execution_table step with action 'Print Direction.Up'

If we add a new enum member DownRight = "DOWNRIGHT", what will be its value?

A A number assigned automatically

B "DOWNRIGHT"

C undefined

D null

💡 Hint

String enums require explicit string values as shown in execution_table step 1

Concept Snapshot

String enums in TypeScript assign explicit string values to enum members.
Syntax: enum Name { Member = "string" }
Use enum members to get their string values.
Useful for readable constants instead of numbers.
Compare enum members directly to strings.

Full Transcript

This example shows how to define and use string enums in TypeScript. First, the enum Direction is created with members Up, Down, Left, and Right, each assigned a string value like "UP". When we access Direction.Up, it evaluates to the string "UP". Printing Direction.Up outputs "UP" to the console. String enums let us use meaningful string constants instead of numbers. You can compare enum members directly to their string values. This makes code easier to read and understand.

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