React+ Typescript: Deep Dive into "readonly"

Type-Level Immutability in TypeScript with readonly

---

💡Intro

When you want to make sure no one mutates your types, readonly is your tool.

---

🧠Context

Unlike as const, which applies at the value level, readonly applies immutability at the type level. It prevents accidental mutations in objects, arrays, and class properties.

---

📌Intro

In React apps, readonly ensures props, API response types, and shared objects remain untouched.

---

❓Why Use This?

• Prevents runtime bugs by forbidding mutation.
• Useful for API response modeling.
• Guarantees immutability in large codebases.

---

📝With vs Without Example

// Without readonly
interface User {
  name: string;
  age: number;
}
let user: User = { name: "Arka", age: 22 };
user.age = 23; // Allowed

// With readonly
interface User {
  readonly name: string;
  readonly age: number;
}
let user: User = { name: "Arka", age: 22 };
user.age = 23; // Error: cannot assign

---

📌Real Life Use Cases

React Props

type ProfileProps = {
  readonly name: string;
  readonly skills: readonly string[];
};

function Profile({ name, skills }: ProfileProps) {
  // Cannot mutate skills inside
  return <div>{skills.join(", ")}</div>;
}

---

API Response

type ApiResponse = {
  readonly id: number;
  readonly status: "success" | "error";
};

---

readonly ensures compile-time safety. It does not make runtime data truly immutable, it just prevents mutation in code.