Why Readonly class properties in Typescript? - Purpose & Use Cases

The Big Idea

What if you could stop bugs before they even happen by locking important data in your code?

The Scenario

Imagine you create a class to represent a user profile. You want some details, like the user ID, to never change after the profile is created. But without a way to lock these details, anyone can accidentally change them later in the code.

The Problem

Manually checking every place in your code to avoid changing important properties is slow and error-prone. It's easy to forget and accidentally overwrite values, causing bugs that are hard to find.

The Solution

Readonly class properties let you mark certain values as unchangeable after they are set once. This means the TypeScript compiler will stop you if you try to change them, keeping your data safe and your code more reliable.

Before vs After

✗ Before

class User {
  id: number;
  constructor(id: number) {
    this.id = id;
  }
}

const user = new User(1);
user.id = 2; // Oops, changed by mistake!

✓ After

class User {
  readonly id: number;
  constructor(id: number) {
    this.id = id;
  }
}

const user = new User(1);
user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

What It Enables

This lets you build safer programs where important data stays constant, preventing bugs and making your code easier to trust and maintain.

Real Life Example

Think of a banking app where an account number should never change once created. Using readonly properties ensures the account number stays the same throughout the app.

Key Takeaways

Readonly properties prevent accidental changes to important data.

They help catch errors early during coding, not at runtime.

Using them makes your code safer and easier to maintain.