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.