Enums
📚 What are Enums in TypeScript? An enum (enumeration) gives friendly names to a fixed set of values. Instead of checking if status === 'done' (where 'done' is a magic string that could be misspelled anywhere), you use Status.Done and TypeScript catches any typos. Enums make intent clear and preven…
Appy Says…
Enums are TypeScript's way of defining a named set of constants. Instead of magic strings and numbers scattered through your code, you get readable names with TypeScript enforcement. Though — union literal types often work better.
What are TypeScript Enums?
An enum defines a set of named constants. TypeScript has numeric enums (default) and string enums.
- •Numeric:
enum Direction { North, South, East, West }→ North=0, South=1… - •Access:
Direction.North(value: 0) - •String enum:
enum Status { Loading = 'LOADING', Done = 'DONE' } - •String enums are preferred — values are readable in JSON/logs
- •Const enum:
const enum Size { Small, Medium, Large }— inlined at compile time - •Reverse mapping: numeric enums allow
Direction[0]→'North'(string enums don't)
Think of it like Minecraft game states
Minecraft's game state isn't stored as raw numbers like 0, 1, 2. It's named: SURVIVAL, CREATIVE, ADVENTURE, SPECTATOR. Enums do the same — give meaningful names to a fixed set of options so code reads like English.
How It Works
- •1.
enum Color { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' } - •2. Use:
const c: Color = Color.Red; - •3. TypeScript ensures only valid enum values are assigned
- •4. In switch:
case Color.Red: ...— readable and exhaustive-check friendly - •5. String enums in JSON/API are readable:
'RED'not0 - •6.
const enumis inlined — no runtime object created, smallest output
Real-World Examples
- •HTTP status:
enum HttpStatus { OK = 200, NotFound = 404, ServerError = 500 } - •User role:
enum Role { Admin = 'ADMIN', Teacher = 'TEACHER', Student = 'STUDENT' } - •Keyboard keys:
enum Key { Enter = 'Enter', Escape = 'Escape', Tab = 'Tab' } - •Build phases:
enum BuildPhase { Thinking, Planning, Building, Done }
Key Facts
- •Many TypeScript teams prefer union literal types over enums:
type Status = 'idle' | 'loading'is simpler with less runtime overhead - •Numeric enums have a quirk: they allow reverse mapping AND any number is assignable to them — use string enums to avoid this
- •const enum is erased entirely from JS output — pure compile-time
- •React Native and some bundlers have issues with const enums
Watch Out!
Numeric enums allow any number to be assigned to them at runtime — TypeScript's type safety weakens. const role: Role = 99 compiles without error for numeric enums. Always use string enums for values that appear in external data (APIs, databases, logs).
Remember
Use string enums for readability and safety: enum Status { Idle = 'IDLE', Loading = 'LOADING' }. Consider union literal types as a simpler alternative: type Status = 'idle' | 'loading'.
What You Learned
- •Enums define named constant sets; string enums are safer and more readable than numeric
- •Use in switches, API contracts, config values — anywhere a fixed set of options is needed
- •Unlocks: readable constants, exhaustive type checking, self-documenting state machines
Key Facts
- →Many TypeScript teams prefer union literal types over enums:
type Status = 'idle' | 'loading'is simpler with less runtime overhead - →Numeric enums have a quirk: they allow reverse mapping AND any number is assignable to them — use string enums to avoid this
- →const enum is erased entirely from JS output — pure compile-time
- →React Native and some bundlers have issues with const enums
Real-World Examples
Remember
Use string enums for readability and safety: enum Status { Idle = 'IDLE', Loading = 'LOADING' }. Consider union literal types as a simpler alternative: type Status = 'idle' | 'loading'.
Quick Quiz
Enum is for?