Readonly properties in interfaces 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 in JavaScript?

Typescript

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "Alice" };
user.name = "Bob";
// user.id = 2; // Uncommenting this line causes error
console.log(user);

A Compilation error due to assignment to readonly property

B {"id":1,"name":"Bob"}

C TypeError at runtime

D {"id":2,"name":"Bob"}

💡 Hint

Readonly properties prevent assignment in TypeScript but do not affect runtime JavaScript objects.

The readonly modifier in TypeScript prevents assignment to the property during compilation. However, at runtime, JavaScript does not enforce readonly, so changing 'name' works fine. The commented line would cause a compile-time error if uncommented. The output shows the updated name but the original id.

❓ Predict Output

intermediate

Readonly array property behavior

Given this interface and code, what is the output?

Typescript

interface Data {
  readonly values: number[];
}

const d: Data = { values: [1, 2, 3] };
d.values.push(4);
console.log(d.values.length);

A Runtime error

B 3

C Compilation error due to push on readonly array

D 4

💡 Hint

Readonly applies to the reference, not the contents of the array.

The 'readonly' keyword on the array property means the reference to the array cannot be changed, but the array's contents can still be modified. So push adds an element, increasing length to 4.

🔧 Debug

advanced

Why does this readonly property assignment cause an error?

Identify the error in this code and explain why it happens.

Typescript

interface Config {
  readonly port: number;
}

const config: Config = { port: 8080 };
config.port = 3000;

A Compilation error: Cannot assign to 'port' because it is a read-only property.

B Runtime error: Cannot assign to read-only property 'port'.

C No error, port is updated to 3000.

D Syntax error: Missing semicolon.

💡 Hint

Readonly properties cannot be assigned after initialization in TypeScript.

The assignment to 'port' after initialization violates the readonly constraint, causing a compile-time error.

📝 Syntax

advanced

Which interface declaration correctly uses readonly properties?

Select the option that correctly declares an interface with readonly properties in TypeScript.

A interface Point { readonly x: number; readonly y: number; }

B interface Point { x: readonly number; y: readonly number; }

C interface Point { readonly x: readonly number; y: readonly number; }

D interface Point { x: number readonly; y: number readonly; }

💡 Hint

The readonly keyword goes before the property name.

In TypeScript, readonly is placed before the property name. Options B, C, and D use invalid syntax.

🚀 Application

expert

Effect of readonly on nested objects in interfaces

Consider this interface and code. What will be the output?

Typescript

interface Profile {
  readonly id: number;
  details: {
    readonly email: string;
    phone: string;
  };
}

const p: Profile = { id: 1, details: { email: "[e-mail]", phone: "123" } };
p.details.phone = "456";
// p.details.email = "[e-mail]"; // Uncommenting causes error
console.log(p.details);

A Compilation error due to assignment to nested readonly property

B {"email":"[e-mail]","phone":"456"}

C {"email":"[e-mail]","phone":"456"}

D Runtime error

💡 Hint

Readonly applies to each property individually, including nested ones.

The 'phone' property is not readonly, so it can be changed. The 'email' property is readonly, so assigning to it causes a compile-time error if uncommented. The output shows the updated phone and original email.

Practice

1.

What does the readonly keyword do when used in a TypeScript interface property?

easy

A. Prevents the property from being changed after initialization

B. Allows the property to be changed anytime

C. Makes the property optional

D. Makes the property private

Solution

1. Step 1: Understand the purpose of readonly in interfaces

   The readonly keyword marks a property so it cannot be reassigned after the object is created.

2. Step 2: Compare with other options

   Options A, B, and D describe different behaviors: A makes optional, B allows changes, D changes visibility, none of which match readonly.

3. Final Answer:

   Prevents the property from being changed after initialization -> Option A

4. Quick Check:

   readonly means no changes allowed after creation [OK]

Hint: Readonly means no changes allowed after creation [OK]

Common Mistakes:

• Thinking readonly makes property optional
• Confusing readonly with private or protected
• Assuming readonly allows reassignment

2.

Which of the following is the correct syntax to declare a readonly property id of type number in a TypeScript interface?

interface User {
  ?
}

easy

A. id: readonly number;

B. id readonly: number;

C. readonly: id number;

D. readonly id: number;

Solution

1. Step 1: Recall correct readonly syntax in interfaces

   The correct syntax places readonly before the property name, then a colon and the type.

2. Step 2: Check each option

   readonly id: number; matches the correct syntax. Options A, B, and C have incorrect order or misplaced keywords.

3. Final Answer:

   readonly id: number; -> Option D

4. Quick Check:

   Readonly keyword comes before property name [OK]

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

Common Mistakes:

• Placing readonly after property name
• Using readonly as a type
• Misplacing colons or semicolons

3.

Consider the following code:

interface Point {
  readonly x: number;
  readonly y: number;
}

const p: Point = { x: 10, y: 20 };
p.x = 30;
console.log(p.x);

What will happen when this code runs?

medium

A. It will print 30

B. It will print 10

C. Compile-time error due to assignment to readonly property

D. Runtime error when assigning to readonly property

Solution

1. Step 1: Understand readonly behavior at compile time

   TypeScript prevents assigning a new value to a readonly property during compilation, causing an error before running.

2. Step 2: Check runtime behavior

   Since TypeScript errors stop compilation, the code won't run, so no runtime error or output occurs.

3. Final Answer:

   Compile-time error due to assignment to readonly property -> Option C

4. Quick Check:

   Readonly blocks assignment at compile time [OK]

Hint: Readonly errors happen at compile time, not runtime [OK]

Common Mistakes:

• Thinking readonly allows reassignment at runtime
• Expecting runtime error instead of compile error
• Assuming original value changes silently

4.

Find the error in this code snippet:

interface Config {
  readonly url: string;
}

const config: Config = { url: "https://api.com" };
config.url = "https://newapi.com";

medium

A. Cannot assign to 'url' because it is a readonly property

B. Missing semicolon after interface declaration

C. Type mismatch: string assigned to readonly property

D. Interface properties cannot be initialized

Solution

1. Step 1: Identify the readonly property usage

   The property url is marked readonly, so it cannot be reassigned after initialization.

2. Step 2: Check the assignment line

   The line config.url = "https://newapi.com"; tries to change a readonly property, causing a compile-time error.

3. Final Answer:

   Cannot assign to 'url' because it is a readonly property -> Option A

4. Quick Check:

   Readonly properties cannot be reassigned [OK]

Hint: Readonly properties cause errors if reassigned [OK]

Common Mistakes:

• Ignoring readonly and trying to reassign
• Confusing readonly with optional properties
• Thinking semicolon or type is the error

5.

You want to create an interface Person with a readonly id and a mutable name. Which code correctly enforces this?

?

hard

A. interface Person { id: readonly number; name: string; }

B. interface Person { readonly id: number; name: string; }

C. interface Person { readonly id: number; readonly name: string; }

D. interface Person { id: number; name: readonly string; }

Solution

1. Step 1: Define readonly and mutable properties correctly

   The readonly keyword must be before the property name to make it immutable; properties without it remain mutable.

2. Step 2: Evaluate each option

   interface Person { readonly id: number; name: string; } correctly marks id as readonly and name as mutable. Options B, C, and D misuse readonly or make both properties readonly.

3. Final Answer:

   interface Person { readonly id: number; name: string; } -> Option B

4. Quick Check:

   Readonly before property name only for immutable fields [OK]

Hint: Put readonly before only the properties you want fixed [OK]

Common Mistakes:

• Placing readonly after property name or type
• Making all properties readonly by mistake
• Confusing readonly with type annotations