Readonly properties in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with readonly property?

Consider the following TypeScript code. What will be logged to the console?

Typescript

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

const p = new Person('Alice');
console.log(p.name);
// p.name = 'Bob'; // Uncommenting this line causes an error

A "Alice"

B "Bob"

C Error at runtime

D undefined

💡 Hint

Readonly properties can be assigned only once, usually in the constructor.

The readonly property 'name' is assigned in the constructor to 'Alice'. Accessing it logs 'Alice'. Trying to assign a new value causes a compile-time error, but the code as is logs 'Alice'.

❓ Predict Output

intermediate

What error does this code raise when modifying a readonly property?

What error will TypeScript report for the following code snippet?

Typescript

interface Config {
  readonly version: number;
}

const config: Config = { version: 1 };
config.version = 2;

A No error, assignment succeeds

B Cannot assign to 'version' because it is a read-only property.

C SyntaxError: Unexpected token '='

D TypeError: Cannot assign to read only property 'version' of Object

💡 Hint

Readonly properties cannot be assigned after initialization.

TypeScript prevents assignment to readonly properties at compile time with the error: "Cannot assign to 'version' because it is a read-only property."

🔧 Debug

advanced

Why does this code fail to compile when modifying a readonly property?

Identify the reason why the following TypeScript code does not compile.

Typescript

class Car {
  readonly model: string = 'Sedan';
  constructor() {
    this.model = 'Coupe';
  }
}

const car = new Car();
car.model = 'Convertible';

A Class properties cannot be assigned in constructor.

B Cannot assign to 'model' inside constructor because it is readonly.

C Readonly properties cannot have default values.

D Cannot assign to 'model' outside of constructor because it is readonly.

💡 Hint

Readonly properties can be assigned in the constructor or at declaration, but not after.

The assignment 'car.model = "Convertible";' is outside the constructor and causes a compile-time error because 'model' is readonly.

📝 Syntax

advanced

Which option correctly declares a readonly property in a TypeScript interface?

Select the correct syntax to declare a readonly property 'id' of type number in an interface.

A interface User { readonly: number id; }

B interface User { id: readonly number; }

C interface User { readonly id: number; }

D interface User { id: number readonly; }

💡 Hint

The 'readonly' keyword comes before the property name.

The correct syntax places 'readonly' before the property name: 'readonly id: number;'. Other options are invalid syntax.

🚀 Application

expert

How many properties can be modified after object creation?

Given the following TypeScript code, how many properties of the object 'settings' can be changed after creation?

Typescript

type Settings = {
  readonly theme: string;
  volume: number;
  readonly language: string;
  notifications: boolean;
};

const settings: Settings = {
  theme: 'dark',
  volume: 10,
  language: 'en',
  notifications: true
};

settings.volume = 20;
settings.notifications = false;
// settings.theme = 'light'; // Error
// settings.language = 'fr'; // Error

A 2

B 4

C 0

D 3

💡 Hint

Readonly properties cannot be changed after initialization.

Only 'volume' and 'notifications' are writable and can be changed. 'theme' and 'language' are readonly and cannot be modified after creation.