TypeScript Object Type readonly Properties (original) (raw)

Last Updated : 23 Jan, 2025

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. JavaScript `

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());

The name property is marked as readonly, 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.

**Output:

John

**More Examples of TypeScript Object Type readonly Properties

Immutable Point Coordinates

JavaScript ``

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.

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.

**Output:

Point coordinates: (10, 20)

**Readonly Array of Numbers

JavaScript `

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

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

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

**Output:

[1, 2, 3, 4, 5]

Readonly Property in a Class

JavaScript ``

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.

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.

**Output:

Toyota Corolla

Best Practices for Using TypeScript readonly Properties:

**Initialize During Declaration or Constructor: Assign values to readonly properties either at the point of declaration or within the constructor to ensure they remain immutable.
**Use for Immutable Data: Apply readonly to properties that should not change after initialization, such as configuration settings or constant values, to prevent unintended modifications.
**Combine with Readonly Utility Type: Utilize TypeScript's Readonly utility type to create immutable versions of object types, enhancing code safety and predictability.