Readonly utility type in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using Readonly?

Consider the following TypeScript code using the Readonly utility type. What will be logged to the console?

Typescript

interface User {
  name: string;
  age: number;
}

const user: Readonly<User> = { name: "Alice", age: 30 };

// user.age = 31; // Uncommenting this line causes an error

console.log(user.age);

A undefined

B 31

C 30

D Compilation error

💡 Hint

Readonly makes all properties immutable, so you cannot change them after initialization.

The Readonly utility type makes all properties of the object immutable. The code logs the original age value 30. Trying to assign a new value to user.age would cause a compilation error, but since that line is commented out, the code runs and logs 30.

🧠 Conceptual

intermediate

What does the Readonly utility type do in TypeScript?

Choose the best description of what the Readonly utility type does.

A It makes all properties of a type optional.

B It converts all properties of a type to strings.

C It removes all properties from a type.

D It makes all properties of a type immutable (read-only).

💡 Hint

Think about what 'readonly' means in everyday life.

Readonly utility type marks all properties of a type as immutable, meaning you cannot change their values after initialization.

🔧 Debug

advanced

What error does this code produce?

Examine this TypeScript code snippet. What error will the compiler show?

Typescript

type Person = {
  name: string;
  age: number;
};

const person: Readonly<Person> = { name: "Bob", age: 25 };
person.age = 26;

A SyntaxError: Unexpected token '='.

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

C No error, code runs fine.

D ReferenceError: person is not defined.

💡 Hint

Readonly properties cannot be assigned new values.

The Readonly utility type makes all properties read-only. Trying to assign a new value to person.age causes a TypeScript compile-time error indicating the property is read-only.

🚀 Application

advanced

How to make a nested object fully readonly?

Given this nested object type, which approach correctly makes all nested properties readonly in TypeScript?

Typescript

type Profile = {
  user: {
    name: string;
    address: {
      city: string;
      zip: number;
    };
  };
};

A

type ReadonlyProfile = {
  readonly user: {
    readonly name: string;
    readonly address: {
      readonly city: string;
      readonly zip: number;
    };
  };
};

B type ReadonlyProfile = Readonly<Profile>;

C type ReadonlyProfile = Readonly<Profile> & Readonly<Profile['user']> & Readonly<Profile['user']['address']>;

D type ReadonlyProfile = Readonly<Profile> & { user: Readonly<Profile['user']> };

💡 Hint

Readonly only applies shallowly by default.

The Readonly utility type only makes the first level properties readonly. To make nested properties readonly, you must explicitly mark each nested property as readonly or create a deep readonly type. Option A explicitly marks all nested properties readonly.

❓ Predict Output

expert

What is the output of this code using Readonly and mutation?

Analyze this TypeScript code. What will be the output when running it in JavaScript after compilation?

Typescript

type Data = {
  value: number;
  nested: {
    count: number;
  };
};

const data: Readonly<Data> = { value: 10, nested: { count: 5 } };

// data.value = 20; // Error: cannot assign to readonly

data.nested.count = 6;

console.log(data.nested.count);

A 6

B 5

C Compilation error

D Runtime error

💡 Hint

Readonly is shallow; nested objects are not deeply frozen.

Readonly only applies to the first level properties. The nested object itself is not readonly, so its properties can be changed. The code changes nested.count from 5 to 6 and logs 6.