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.

Practice

1. What does the readonly keyword do when used on a class property in TypeScript?

easy

A. It allows the property to be changed anytime.

B. It makes the property private and inaccessible outside the class.

C. It prevents the property from being changed after initialization.

D. It deletes the property after the constructor runs.

Solution

1. Step 1: Understand the purpose of readonly

   The readonly keyword marks a property so it cannot be changed after it is set initially.

2. Step 2: Check when assignment is allowed

   Assignment to a readonly property is only allowed during declaration or inside the constructor.

3. Final Answer:

   It prevents the property from being changed after initialization. -> Option C

4. Quick Check:

   Readonly means fixed value after set [OK]

Hint: Readonly means value can't change after constructor [OK]

Common Mistakes:

• Thinking readonly makes property private
• Assuming readonly allows changes anytime
• Confusing readonly with deleting properties

2. Which of the following is the correct way to declare a readonly property id of type number in a TypeScript class?

easy

A. id: readonly number;

B. readonly id: number;

C. let readonly id: number;

D. const id: number;

Solution

1. Step 1: Recall TypeScript readonly syntax

   The correct syntax places readonly before the property name and type.

2. Step 2: Check each option

   readonly id: number; matches the correct syntax: readonly id: number;. Others misuse keywords or order.

3. Final Answer:

   readonly id: number; -> Option B

4. Quick Check:

   Readonly keyword before property name [OK]

Hint: Put readonly before property name, not after type [OK]

Common Mistakes:

• Using const inside class properties
• Placing readonly after the type
• Combining let with readonly incorrectly

3. What will be the output of this TypeScript code?

class User {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
  changeName(newName: string) {
    // @ts-ignore
    this.name = newName;
  }
}
const user = new User('Alice');
user.changeName('Bob');
console.log(user.name);

medium

A. Alice

B. undefined

C. Compilation error

D. Bob

Solution

1. Step 1: Understand readonly assignment rules

   The name property is readonly and assigned in the constructor, so initial value is 'Alice'. TypeScript enforces this at compile-time.

2. Step 2: Analyze the changeName method

   The @ts-ignore suppresses the TypeScript compile error for assigning to readonly. The code compiles to plain JavaScript, where objects are mutable, so this.name = newName; sets it to 'Bob' at runtime.

3. Final Answer:

   Bob -> Option D

4. Quick Check:

   Readonly is compile-time only; runtime allows changes [OK]

Hint: Readonly bypassed at runtime via @ts-ignore [OK]

Common Mistakes:

• Thinking readonly prevents runtime changes
• Expecting compilation error despite @ts-ignore
• Believing output remains 'Alice'

4. Identify the error in this TypeScript class:

class Product {
  readonly price: number;
  constructor() {
    // No assignment to price here
  }
}
const p = new Product();
p.price = 100;

medium

A. Error: readonly property 'price' is not initialized.

B. Error: Cannot assign to 'price' outside constructor.

C. No error, code runs fine.

D. Error: price must be declared as private.

Solution

1. Step 1: Check readonly property initialization

   The readonly property price must be assigned during declaration or in the constructor.

2. Step 2: Analyze constructor and assignment

   The constructor does not assign price, so TypeScript reports an error about missing initialization.

3. Final Answer:

   Error: readonly property 'price' is not initialized. -> Option A

4. Quick Check:

   Readonly props must be initialized at declaration or constructor [OK]

Hint: Always initialize readonly properties in constructor or declaration [OK]

Common Mistakes:

• Trying to assign readonly property after construction
• Ignoring missing initialization error
• Confusing readonly with private

5. Given this class, how can you safely allow updating the version property while keeping id readonly?

class Document {
  readonly id: string;
  version: number;
  constructor(id: string, version: number) {
    this.id = id;
    this.version = version;
  }
}

hard

A. Keep id readonly and update version normally via a method.

B. Make both id and version readonly and update via constructor only.

C. Remove readonly from id to allow all updates.

D. Make version readonly and update id instead.

Solution

1. Step 1: Understand readonly usage

   The id should remain readonly to keep it fixed after creation.

2. Step 2: Allow version updates

   The version property is not readonly, so it can be updated safely anytime, for example via a method.

3. Final Answer:

   Keep id readonly and update version normally via a method. -> Option A

4. Quick Check:

   Readonly for fixed, normal for changeable [OK]

Hint: Readonly for fixed props, normal for changeable ones [OK]

Common Mistakes:

• Making all properties readonly and losing flexibility
• Removing readonly from fixed properties
• Confusing which property should be updated