TypeScript Object Type readonly Properties

In TypeScript, the readonly modifier ensures that a property can be assigned a value only once during initialization and cannot be changed thereafter.

• This immutability helps prevent accidental modifications to object properties, enhancing code reliability.
• You can apply readonly to properties in classes, interfaces, and type aliases.

Now let's understand this with help of example:

class ReadonlyExample {
  readonly name: string;

  constructor(name: string) {
    this.name = name;
  }

  getName(): string {
    return this.name;
  }
}

const obj = new ReadonlyExample("John");
console.log(obj.getName());

Output:

John

In this example:

• The name property is marked as read-only, meaning it can only be assigned during object initialization via the constructor.
• The constructor accepts a name parameter and assigns its value to the readonly property.
• The getName method is used to retrieve the value of the name property.
• An instance of the ReadonlyExample class is created with the name "John", and the getName method is called to print the name.

Immutable Point Coordinates

The readonly modifier can be applied within an interface to make object properties immutable. Once a value is assigned, it cannot be changed. This is especially useful for representing fixed values, such as point coordinates.

Now let's undersatnd this with the help of example:

interface Point {
  readonly x: number;
  readonly y: number;
}

const p1: Point = { x: 10, y: 20 };
console.log(`Point coordinates: (${p1.x}, ${p1.y})`);

// p1.x = 15; // Error: Cannot assign to 'x' because it is a read-only property.

Output:

Point coordinates: (10, 20)

In this example:

• Defines a Point interface with readonly properties x and y, ensuring the coordinates cannot be modified after initialization.
• Attempts to reassign p1.x will result in a compile-time error, enforcing immutability.

Readonly Array of Numbers

A ReadonlyArray<number> (or readonly number[]) in TypeScript creates an array that cannot be modified after initialization.

Now let's understand this with the help of example:

const numbers: ReadonlyArray<number> = [1, 2, 3, 4, 5];
console.log(numbers);

// numbers.push(6); // Error: Property 'push' does not exist on type 'readonly number[]'.

Output:

[1, 2, 3, 4, 5]

In this example:

• Creates a ReadonlyArray of numbers, preventing any modification methods like push or pop.
• Ensures the array remains unchanged throughout its lifecycle, promoting data integrity.

Readonly Property in a Class

A ReadonlyArray<number> (or readonly number[]) in TypeScript creates an array that cannot be modified after initialization.

Now let's understand this with the help of example:

class Car {
  readonly make: string;
  readonly model: string;

  constructor(make: string, model: string) {
    this.make = make;
    this.model = model;
  }

  getCarInfo(): string {
    return `${this.make} ${this.model}`;
  }
}

const myCar = new Car('Toyota', 'Corolla');
console.log(myCar.getCarInfo());

// myCar.make = 'Honda'; // Error: Cannot assign to 'make' because it is a read-only property.

Output:

Toyota Corolla

In this example:

• Defines a Car class with readonly properties make and model, set during object instantiation.
• The getCarInfo method returns the car's make and model.
• Attempts to modify myCar.make after creation will result in a compile-time error, preserving the object's state.