TypeScript Literal Types

🎯 TypeScript Literal Types (Beginner → Advanced)

Literal Types in TypeScript let you restrict a variable to exact values instead of broad types like string or number.
They are extremely useful for APIs, UI states, configuration objects, and interviews.

1️⃣ What Are Literal Types?

A literal type represents one specific value.

let status: "success";
status = "success"; // ✅
// status = "error"; ❌

Here, "success" is a string literal type.

2️⃣ Types of Literal Types ⭐

TypeScript supports these literal types:

  1. String Literal Types

  2. Number Literal Types

  3. Boolean Literal Types

3️⃣ String Literal Types ⭐

type Direction = "left" | "right" | "up" | "down";

let move: Direction;

move = “left”; // ✅
move = “right”; // ✅
// move = “top”; ❌

✔ Very common in UI logic & APIs

4️⃣ Number Literal Types ⭐

type Dice = 1 | 2 | 3 | 4 | 5 | 6;

let roll: Dice;

roll = 6; // ✅
// roll = 7; ❌

✔ Useful for fixed numeric ranges

5️⃣ Boolean Literal Types ⭐

type Toggle = true | false;

let isOn: Toggle;

✔ Mostly used internally in advanced typing

6️⃣ Literal Types with const ⭐ (Very Important)

let mode = "dark";
// mode: stringconst theme = “dark”;
// theme: “dark”

✔ const preserves the literal value
✔ let widens to string

7️⃣ Literal Types in Functions ⭐

function setAlign(align: "left" | "center" | "right") {
console.log(align);
}setAlign(“center”); // ✅
// setAlign(“top”); ❌

✔ Prevents invalid arguments

8️⃣ Discriminated Unions (Best Use Case) ⭐⭐

type Success = {
status: "success";
data: string;
};type ErrorResponse = {
status: “error”;
message: string;
};

type ApiResponse = Success | ErrorResponse;

function handle(res: ApiResponse) {
if (res.status === “success”) {
console.log(res.data);
} else {
console.log(res.message);
}
}

✔ Safe
✔ Clean
✔ Interview favorite

9️⃣ Literal Types with Objects (as const) ⭐⭐

const config = {
env: "prod",
debug: false
} as const;

Inferred as:

{
readonly env: "prod";
readonly debug: false;
}

✔ Freezes values at type level

🔟 Literal Types vs Enums ⭐

Literal TypesEnums
No JS outputJS code generated
LightweightHeavier
Tree-shakeableNot always
Preferred in modern TSLegacy use

✔ Literal types are often better than enums

1️⃣1️⃣ Common Mistakes ❌

  • Forgetting const

  • Over-widening types

  • Using enums unnecessarily

  • Not using unions with literals

  • Confusing literal vs primitive type

📌 Interview Questions (Must Prepare)

  1. What are literal types?

  2. Difference between string and "string"?

  3. Why use as const?

  4. Literal types vs enums?

  5. What is a discriminated union?

🔥 Real-World Use Cases

  • UI state management

  • Redux actions

  • API responses

  • Configuration objects

  • Form validation

✅ Summary

✔ Literal types restrict values to exact constants
✔ Used with union types for safety
✔ const preserves literal inference
✔ as const locks objects & arrays
✔ Power discriminated unions
✔ Essential for robust TypeScript code

You may also like...