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.

Practice

1. What does the readonly keyword do in TypeScript?

easy

A. Prevents a property from being changed after it is set

B. Allows a property to be changed anytime

C. Makes a property private and inaccessible

D. Deletes a property from an object

Solution

1. Step 1: Understand the purpose of readonly

   The readonly keyword is used to mark properties that cannot be changed after initialization.

2. Step 2: Compare options with the behavior

   Only Prevents a property from being changed after it is set correctly describes that the property cannot be changed after it is set.

3. Final Answer:

   Prevents a property from being changed after it is set -> Option A

4. Quick Check:

   readonly means no changes allowed after set [OK]

Hint: Readonly means no changes allowed after initial set [OK]

Common Mistakes:

• Thinking readonly allows changes anytime
• Confusing readonly with private
• Assuming readonly deletes properties

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

easy

A. const id: number;

B. readonly id: number;

C. private readonly id: number;

D. id readonly: number;

Solution

1. Step 1: Recall TypeScript syntax for readonly properties

   The correct syntax is to place readonly before the property name.

2. Step 2: Check each option

   readonly id: number; uses readonly id: number; which is correct. const id: number; uses const which is invalid inside class properties. private readonly id: number; adds private which is valid but not asked for. id readonly: number; has wrong order.

3. Final Answer:

   readonly id: number; -> Option B

4. Quick Check:

   Readonly keyword goes before property name [OK]

Hint: Put readonly before property name in class [OK]

Common Mistakes:

• Using const instead of readonly in class
• Placing readonly after property name
• Confusing access modifiers with readonly

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

class User {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const user = new User('Alice');
user.name = 'Bob';
console.log(user.name);

medium

A. Alice

B. Bob

C. undefined

D. Compile-time error

Solution

1. Step 1: Understand readonly property behavior

   The property name is marked readonly, so it cannot be assigned a new value after construction.

2. Step 2: Analyze the assignment user.name = 'Bob'

   This line tries to change a readonly property, which causes a compile-time error in TypeScript.

3. Final Answer:

   Compile-time error -> Option D

4. Quick Check:

   Assigning to readonly property causes error [OK]

Hint: Changing readonly property causes compile error [OK]

Common Mistakes:

• Assuming readonly properties can be changed anytime
• Expecting runtime error instead of compile error
• Thinking output will be the new value

4. Identify the error in this TypeScript code and fix it:

interface Point {
  readonly x: number;
  y: number;
}
const p: Point = { x: 10, y: 20 };
p.x = 15;
console.log(p.x);

medium

A. Property 'y' should be readonly too

B. Missing type annotation for 'p'

C. Cannot assign to 'x' because it is a readonly property

D. No error, code runs fine

Solution

1. Step 1: Check readonly property assignment

   The property x is readonly in the interface, so assigning p.x = 15 is not allowed.

2. Step 2: Identify the error message

   TypeScript will report an error: "Cannot assign to 'x' because it is a readonly property".

3. Final Answer:

   Cannot assign to 'x' because it is a readonly property -> Option C

4. Quick Check:

   Readonly properties cannot be assigned after initialization [OK]

Hint: Readonly properties cannot be reassigned after creation [OK]

Common Mistakes:

• Ignoring readonly and trying to assign anyway
• Thinking missing type annotation causes error
• Assuming no error occurs

5. You want to create a TypeScript class Config where the version property is set once during construction and never changes, but settings can be updated anytime. Which is the best way to declare these properties?

hard

A. readonly version: string; settings: object;

B. version: string; readonly settings: object;

C. readonly version: string; readonly settings: object;

D. version: string; settings: object;

Solution

1. Step 1: Understand property requirements

   The version should be readonly (set once, no changes). The settings should be mutable (can change anytime).

2. Step 2: Match options with requirements

   readonly version: string; settings: object; correctly marks version as readonly and leaves settings mutable. version: string; readonly settings: object; reverses roles. readonly version: string; readonly settings: object; makes both readonly. version: string; settings: object; makes both mutable.

3. Final Answer:

   readonly version: string; settings: object; -> Option A

4. Quick Check:

   Readonly for fixed, mutable for changeable properties [OK]

Hint: Readonly for fixed, normal for changeable properties [OK]

Common Mistakes:

• Making mutable properties readonly by mistake
• Not using readonly for fixed properties
• Confusing which property should be readonly