Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/typescript/typescript-object-type-readonly-properties/ below:

TypeScript Object Type readonly Properties

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.

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

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)

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[]'.

• 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]

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

• 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<T> Utility Type: Utilize TypeScript's Readonly<T> utility type to create immutable versions of object types, enhancing code safety and predictability.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4