Readonly class properties in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of readonly property assignment

What will be the output of this TypeScript code when compiled and run with strict mode?

Typescript

class Car {
  readonly brand: string;
  constructor(brand: string) {
    this.brand = brand;
  }
  changeBrand(newBrand: string) {
    this.brand = newBrand;
  }
}
const myCar = new Car('Toyota');
console.log(myCar.brand);
myCar.changeBrand('Honda');
console.log(myCar.brand);

A Runtime error when trying to assign to readonly property

B Toyota\nHonda

C Toyota\nToyota

D Compilation error due to assignment to readonly property

💡 Hint

Readonly properties cannot be assigned outside the constructor.

In TypeScript, readonly properties can only be assigned during declaration or inside the constructor. Trying to assign them elsewhere causes a compile-time error.

🧠 Conceptual

intermediate

Readonly property behavior in subclasses

Consider this TypeScript code. What will be the output when running it?

Typescript

class Animal {
  readonly species: string = 'Unknown';
  constructor(species?: string) {
    if (species) this.species = species;
  }
}
class Dog extends Animal {
  constructor() {
    super('Canine');
    this.species = 'Dog';
  }
}
const pet = new Dog();
console.log(pet.species);

A Compilation error due to assignment to readonly property in subclass

B Dog

C Runtime error due to assignment to readonly property

D Canine

💡 Hint

Readonly properties can only be assigned once, typically in the constructor of the declaring class.

The readonly property species is assigned in the Animal constructor. Trying to assign it again in the Dog subclass constructor causes a compile-time error.

🔧 Debug

advanced

Why does this readonly property assignment fail?

This TypeScript code fails to compile. Identify the cause of the error.

Typescript

class Book {
  readonly title: string;
  constructor(title: string) {
    this.title = title;
  }
  rename(newTitle: string) {
    this.title = newTitle;
  }
}
const novel = new Book('1984');
novel.rename('Animal Farm');

A 'title' is not initialized in the constructor

B Cannot assign to 'title' because it is a readonly property

C Method rename is not allowed in class with readonly properties

D No error, code runs and outputs 'Animal Farm'

💡 Hint

Readonly properties cannot be changed after initial assignment.

The rename method tries to assign a new value to the readonly property title, which is not allowed and causes a compile-time error.

📝 Syntax

advanced

Identify the syntax error with readonly property

Which option contains a syntax error related to readonly class properties?

A class User { readonly name: string; constructor() { this.name = 'Alice'; } changeName() { this.name = 'Bob'; } }

B class User { readonly name: string; constructor() { this.name = 'Alice'; } }

C class User { readonly name: string = 'Alice'; constructor() { this.name = 'Bob'; } }

D class User { readonly name = 'Alice'; constructor() {} }

💡 Hint

Check where readonly properties are assigned.

Option A tries to assign a new value to a readonly property inside a method, which is not allowed and causes a compile-time error.

🚀 Application

expert

Readonly properties with parameter properties

What will be the output of this TypeScript code?

Typescript

class Point {
  constructor(readonly x: number, readonly y: number) {}
  move(newX: number, newY: number) {
    this.x = newX;
    this.y = newY;
  }
}
const p = new Point(5, 10);
console.log(`${p.x},${p.y}`);
p.move(20, 30);
console.log(`${p.x},${p.y}`);

A 5,10\n5,10

B 5,10\n20,30

C Compilation error due to assignment to readonly properties

D Runtime error when trying to assign to readonly properties

💡 Hint

Readonly parameter properties cannot be reassigned after construction.

The move method tries to assign new values to readonly properties x and y, which causes a compile-time error.