Enum vs union literal type trade-offs in Typescript - Visual Side-by-Side Comparison

Concept Flow - Enum vs union literal type trade-offs

Define Enum

↓

Use Enum value

↓

Compile to JS object

↓

Runtime available

↓

Define Union Literal Type

↓

Use literal values

↓

No JS output

↓

Compile-time only

Shows how enums create runtime objects while union literals exist only at compile time.

Execution Sample

Typescript

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let c: Color = Color.Red;

Defines an enum Color and assigns a value from it.

Execution Table

Step	Action	Evaluation	Result
1	Define enum Color	Create JS object with keys Red, Green, Blue	{ Red: 'RED', Green: 'GREEN', Blue: 'BLUE' }
2	Assign c = Color.Red	Look up Color.Red	'RED'
3	Use c in code	Value is 'RED'	c = 'RED'
4	Define union type ColorUnion = 'RED' | 'GREEN' | 'BLUE'	No JS output	Type only
5	Assign cu: ColorUnion = 'RED'	Check if 'RED' is in union	Valid assignment
6	Use cu in code	Value is 'RED'	cu = 'RED'
7	End	No more steps	Execution stops

💡 All assignments valid; union literals have no runtime object; enums do.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6	Final
c	undefined	'RED'	'RED'	N/A	N/A	'RED'
cu	undefined	N/A	N/A	'RED'	'RED'	'RED'

Key Moments - 3 Insights

Why does enum create a JavaScript object but union literal types do not?

Enums generate real JavaScript objects at runtime (see Step 1 in execution_table), so their values exist in the output code. Union literal types are only for compile-time checks and disappear after compilation (see Step 4).

Can you assign any string to a union literal type variable?

No, only the exact strings listed in the union are allowed (see Step 5). Assigning other strings causes a compile error.

Which is safer to use if you want to avoid runtime overhead?

Union literal types have no runtime overhead because they don't create objects (Step 4). Enums create objects which exist at runtime (Step 1).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of variable 'c' after Step 3?

A 'Green'

B 'RED'

C undefined

D 'BLUE'

💡 Hint

Check the 'Result' column for Step 3 in execution_table.

At which step does the union literal type variable 'cu' get assigned a value?

A Step 2

B Step 3

C Step 5

D Step 1

💡 Hint

Look for 'Assign cu: ColorUnion = 'RED'' in execution_table.

If you want to avoid any runtime JavaScript object creation, which should you choose?

A Union literal type

B Enum

C Both create runtime objects

D Neither creates runtime objects

💡 Hint

See the 'Evaluation' and 'Result' columns for Steps 1 and 4 in execution_table.

Concept Snapshot

Enum vs Union Literal Types in TypeScript:
- Enum creates a runtime JS object with named values.
- Union literal types exist only at compile time, no JS output.
- Enums allow reverse mapping and runtime checks.
- Union literals are safer with zero runtime overhead.
- Choose based on need for runtime presence or pure type safety.

Full Transcript

This visual execution compares TypeScript enums and union literal types. Enums create JavaScript objects at runtime, so their values exist in the output code. Union literal types only exist during compilation and disappear after, providing type safety without runtime cost. Variables assigned enum values hold the actual string or number from the enum object. Variables with union literal types hold strings but have no runtime object backing them. This trade-off helps decide when to use enums for runtime features or union literals for lightweight type checks.