"as const" vs "readonly" in TypeScript: What’s the Difference?

as const vs readonly

Both enforce immutability, but they work at different levels and confusing them can lead to subtle bugs.

🧠Context

Developers often ask: when should I use as const, and when should I use readonly? The answer depends on whether you’re working with values or types.

💡Intro

This post compares both features, shows their differences, and explains when to use each.

❓Why Use This?

• as const → literal type + value immutability.
• readonly → type-level immutability.

📝With vs Without Example

// as const const roles = ["admin", "user"] as const; type Role = typeof roles[number]; // "admin" | "user" 

// readonly type Roles = readonly string[]; const roles: Roles = ["admin", "user"]; // Cannot push new items 

📌Real Life Use Cases

• as const for config objects, button variants.
• readonly for API response types, props contracts.

Think of as const as a value lock, and readonly as a type contract.