- Jul 17, 2026
- admin
- 0
Enums in TypeScript
An Enum (Enumeration) is a user-defined data type used to represent a fixed set of named constants. Enums make your code more readable and maintainable by replacing “magic numbers” or hardcoded strings with meaningful names.
Why Use Enums?
Without Enum
let browser = “chrome”;
if (browser === “chrome”) {
console.log(“Launching Chrome”);
}
Problems:
- ❌ Typing mistakes can cause bugs.
- ❌ Hardcoded strings are difficult to maintain.
With Enum
enum Browser {
Chrome,
Edge,
Firefox
}
let browser = Browser.Chrome;
if (browser === Browser.Chrome) {
console.log(“Launching Chrome”);
}
Benefits:
- ✅ Type safety
- ✅ Better readability
- ✅ Easy maintenance
- ✅ Auto-completion in IDEs
Syntax
enum EnumName {
VALUE1,
VALUE2,
VALUE3
}
Example
enum Days {
Monday,
Tuesday,
Wednesday
}
console.log(Days.Monday);
Output
0
- Numeric Enum (Default)
TypeScript automatically assigns numbers starting from 0.
enum Browser {
Chrome,
Edge,
Firefox
}
console.log(Browser.Chrome);
console.log(Browser.Edge);
console.log(Browser.Firefox);
Output
0
1
2
- Custom Numeric Enum
enum Browser {
Chrome = 10,
Edge,
Firefox
}
console.log(Browser.Chrome);
console.log(Browser.Edge);
console.log(Browser.Firefox);
Output
10
11
12
- String Enum (Recommended)
enum Browser {
Chrome = “chrome”,
Edge = “edge”,
Firefox = “firefox”
}
console.log(Browser.Chrome);
Output
chrome
- Mixed Enum
Although supported, it’s generally discouraged because it can make code harder to understand.
enum Status {
Success = 1,
Failed = “FAILED”
}
console.log(Status.Success);
console.log(Status.Failed);
Output
1
FAILED
- Using Enum in Functions
enum Browser {
Chrome,
Edge,
Firefox
}
function launchBrowser(browser: Browser): void {
console.log(browser);
}
launchBrowser(Browser.Edge);
Output
1
- Enum in Switch Statement
enum Browser {
Chrome,
Edge,
Firefox
}
function open(browser: Browser) {
switch(browser){
case Browser.Chrome:
console.log(“Launching Chrome”);
break;
case Browser.Edge:
console.log(“Launching Edge”);
break;
case Browser.Firefox:
console.log(“Launching Firefox”);
break;
}
}
open(Browser.Firefox);
Output
Launching Firefox
- Reverse Mapping (Numeric Enums Only)
enum Browser {
Chrome,
Edge,
Firefox
}
console.log(Browser[0]);
console.log(Browser[1]);
Output
Chrome
Edge
Reverse mapping does not work with string enums.
- Iterate Through Enum
Numeric Enum
enum Browser {
Chrome,
Edge,
Firefox
}
for (let key in Browser) {
console.log(key);
}
Output
0
1
2
Chrome
Edge
Firefox
String Enum
enum Browser {
Chrome = “chrome”,
Edge = “edge”,
Firefox = “firefox”
}
console.log(Object.keys(Browser));
console.log(Object.values(Browser));
Output
[“Chrome”,”Edge”,”Firefox”]
[“chrome”,”edge”,”firefox”]
- Const Enum
const enum is removed during compilation, resulting in smaller and faster JavaScript.
const enum Browser {
Chrome,
Edge,
Firefox
}
let browser = Browser.Chrome;
console.log(browser);
Generated JavaScript
let browser = 0;
console.log(browser);
Advantages
- Faster execution
- Smaller JavaScript output
- Better performance
Limitation
You cannot iterate over a const enum because it does not exist at runtime.
- Real-Time Example (Playwright)
enum Environment {
DEV = “https://dev.techtutorialz.com”,
QA = “https://qa.techtutorialz.com”,
PROD = “https://techtutorialz.com”
}
async function launch(env: Environment) {
console.log(“Opening:”, env);
}
launch(Environment.QA);
Enum vs Object
| Enum | Object |
| Type-safe | Not type-safe |
| Compile-time checking | Runtime only |
| Better IDE support | Limited |
| Suitable for fixed values | Suitable for dynamic data |
Enum vs Union Type
Enum
enum Browser {
Chrome,
Edge,
Firefox
}
Union Type
type Browser = “chrome” | “edge” | “firefox”;
When to use?
- Use Enums for named constants with shared meaning.
- Use Union Types for restricting values, especially in modern TypeScript code.
Best Practices
- ✅ Prefer string enums for readability.
- ✅ Use enums only for a fixed set of related values.
- ✅ Use const enum for performance when runtime access is not needed.
- ✅ Give enum members meaningful names.
- ❌ Avoid mixed enums.
- ❌ Don’t use enums when values are dynamic.
