Const enums and optimization in Typescript - Step-by-Step Execution

Concept Flow - Const enums and optimization

Define const enum

↓

Use enum values in code

↓

Compile TypeScript

↓

Compiler replaces enum references with values

↓

Output JavaScript without enum object

↓

Run optimized JavaScript code

This flow shows how const enums are defined and then replaced by their values during compilation, resulting in optimized JavaScript without extra enum objects.

Execution Sample

Typescript

const enum Colors {
  Red = 1,
  Green,
  Blue
}

let c = Colors.Green;

Defines a const enum Colors and assigns Colors.Green to variable c, which compiles to direct value usage.

Execution Table

Step	Code Line	Action	Compilation Output	Result
1	const enum Colors { Red = 1, Green, Blue }	Define const enum	No JS output for enum object	Enum values known at compile time
2	let c = Colors.Green;	Use enum value	let c = 2;	Enum reference replaced by value 2
3	Run JS code	Variable c assigned	c = 2	Variable c holds number 2
4	End	No further code	-	Execution complete

💡 Compilation replaces enum references with values, so no enum object exists at runtime.

Variable Tracker

Variable	Start	After assignment	Final
c	undefined	2	2

Key Moments - 3 Insights

Why don't we see an enum object in the compiled JavaScript?

Because const enums are replaced by their values at compile time, no enum object is generated, as shown in execution_table row 1 and 2.

What value does variable 'c' hold after assignment?

Variable 'c' holds the numeric value 2, which is the value of Colors.Green, as shown in execution_table row 3 and variable_tracker.

Can we use const enums with computed or dynamic values?

No, const enums must have constant values so the compiler can replace them; this is why the enum values are simple numbers here.

Visual Quiz - 3 Questions

Look at the execution_table, what is the compiled JavaScript for 'let c = Colors.Green;'?

A let c = Colors.Green;

B let c = 2;

C let c = Colors["Green"];

D let c = 1;

💡 Hint

Check execution_table row 2 where enum reference is replaced by value.

According to variable_tracker, what is the value of 'c' after assignment?

A 2

B 1

C undefined

D 3

💡 Hint

Look at variable_tracker row for 'c' after assignment.

If we change 'const enum' to 'enum', what happens to the compiled output?

A No change in output

B Enum references replaced by values

C Enum object is generated in JS

D Compilation error

💡 Hint

Const enums are replaced by values, normal enums generate objects (see concept_flow).

Concept Snapshot

const enum syntax:
const enum Name { A = 1, B, C }

Behavior:
- Enum values replaced at compile time
- No enum object in output JS
- Optimizes runtime performance

Key rule:
Use only constant values for const enums

Full Transcript

Const enums in TypeScript are special enums that the compiler replaces with their values during compilation. This means no enum object is created in the JavaScript output, making the code faster and smaller. For example, defining a const enum Colors with values Red=1, Green=2, Blue=3 and using Colors.Green in code will compile to just the number 2. The variable assigned Colors.Green will hold the number 2 at runtime. Const enums must have constant values so the compiler can replace them. If you use a normal enum instead, the compiler generates an enum object in JavaScript. This optimization helps keep the code efficient.