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.