Readonly utility type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the object properties read-only using the Readonly utility type.

Typescript

type User = [1]<{ name: string; age: number }>;

Drag options to blanks, or click blank then click option'

AReadonly

BPartial

CRequired

DRecord

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of Readonly, which makes properties optional, not read-only.

Using Required which makes properties mandatory but does not affect mutability.

The Readonly utility type makes all properties of the given type read-only.

2fill in blank

medium

Complete the code to create a read-only object and try to assign a new value to a property (which should cause an error).

Typescript

const user: Readonly<{ name: string }> = { name: 'Alice' };
user.[1] = 'Bob';

Drag options to blanks, or click blank then click option'

Aname

Blength

CtoString

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to a property that does not exist.

Confusing method names with property names.

Assigning to name property causes an error because user is read-only.

3fill in blank

hard

Fix the error in the code by using the Readonly utility type correctly.

Typescript

interface Config {
  url: string;
  timeout: number;
}

const config: [1]<Config> = {
  url: 'https://api.example.com',
  timeout: 5000
};

config.timeout = 3000;

Drag options to blanks, or click blank then click option'

APick

BPartial

CReadonly

DRecord

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial which makes properties optional but not read-only.

Using Pick or Record which do not make properties read-only.

Using Readonly makes config properties immutable, so assignment to timeout causes an error.

4fill in blank

hard

Fill both blanks to create a read-only array of strings and try to push a new element (which should cause an error).

Typescript

const fruits: [1]<string[]> = ['apple', 'banana'];
fruits.[2]('orange');

Drag options to blanks, or click blank then click option'

AReadonly

Bpush

Cpop

DPartial

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of Readonly.

Using pop instead of push to add elements.

The Readonly utility type makes the array immutable, so calling push causes an error.

5fill in blank

hard

Fill all three blanks to define a read-only object type, create an instance, and attempt to modify a property (which should cause an error).

Typescript

type [1]<T> = {
  readonly [P in keyof T]: T[P];
};

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

const person: [2]<Person> = { name: 'John', age: 25 };
person.[3] = 30;

Drag options to blanks, or click blank then click option'

AReadonly

Cage

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' instead of 'age' for the property to modify.

Not using the Readonly type for the variable.

The custom Readonly type makes all properties read-only. Trying to assign to age causes an error.

Practice

1. What does the Readonly utility type do in TypeScript?

easy

A. Makes all properties optional

B. Allows properties to be changed only once

C. Removes all properties from an object type

D. Makes all properties of an object type unchangeable

Solution

1. Step 1: Understand the purpose of Readonly

   The Readonly utility type is designed to make all properties of an object type immutable, meaning they cannot be changed after initialization.

2. Step 2: Compare with other options

   Options B, C, and D describe behaviors that are not related to Readonly. Only Makes all properties of an object type unchangeable correctly describes making properties unchangeable.

3. Final Answer:

   Makes all properties of an object type unchangeable -> Option D

4. Quick Check:

   Readonly = makes properties unchangeable [OK]

Hint: Readonly means no changes allowed to object properties [OK]

Common Mistakes:

• Thinking Readonly allows one-time changes
• Confusing Readonly with Partial or Required types
• Believing Readonly removes properties

2. Which of the following is the correct syntax to create a readonly type from an interface User?

easy

A. type ReadonlyUser = Readonly<User>();

B. type ReadonlyUser = Readonly<User>;

C. type ReadonlyUser = readonly User;

D. type ReadonlyUser = Readonly<User>[];

Solution

1. Step 1: Recall the syntax of Readonly utility

   The correct syntax to create a readonly version of a type or interface is Readonly<TypeName> without parentheses or array brackets.

2. Step 2: Analyze each option

   type ReadonlyUser = Readonly<User>; uses the correct generic syntax. type ReadonlyUser = Readonly<User>(); incorrectly uses parentheses. type ReadonlyUser = readonly User; uses lowercase 'readonly' which is a keyword for arrays or tuples, not for types. type ReadonlyUser = Readonly<User>[]; creates an array of readonly users, which is different.

3. Final Answer:

   type ReadonlyUser = Readonly<User>; -> Option B

4. Quick Check:

   Readonly syntax = Readonly<Type> [OK]

Hint: Use Readonly<Type> without parentheses or brackets [OK]

Common Mistakes:

• Adding parentheses after Readonly
• Using lowercase 'readonly' instead of utility type
• Confusing array of readonly with readonly type

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

interface Config {
  url: string;
  timeout: number;
}

const config: Readonly<Config> = { url: 'api.com', timeout: 5000 };

config.timeout = 3000;
console.log(config.timeout);

medium

A. Compilation error

B. 5000

C. 3000

D. undefined

Solution

1. Step 1: Understand Readonly effect on assignment

   The Readonly type makes all properties immutable. Trying to assign a new value to config.timeout will cause a compilation error.

2. Step 2: Check the code behavior

   The line config.timeout = 3000; is invalid and TypeScript will not compile this code, so no runtime output occurs.

3. Final Answer:

   Compilation error -> Option A

4. Quick Check:

   Readonly blocks property assignment = Compilation error [OK]

Hint: Readonly properties cannot be assigned new values [OK]

Common Mistakes:

• Assuming readonly allows property changes
• Expecting old value printed despite error
• Confusing runtime error with compile error

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

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

const p: Readonly<Point> = { x: 10, y: 20 };
p.x = 15;
console.log(p.x);

medium

A. Change p.x = 15; to p = { x: 15, y: 20 };

B. Use as const instead of Readonly

C. Remove Readonly to allow property changes

D. Declare p as let instead of const

Solution

1. Step 1: Identify why assignment fails

   The Readonly type prevents changing properties like p.x</>. The error is caused by trying to assign p.x = 15;.

2. Step 2: Fix by removing Readonly

   Removing Readonly allows property changes. Options A, B, and D do not fix the core problem of property immutability.

3. Final Answer:

   Remove Readonly to allow property changes -> Option C

4. Quick Check:

   Readonly blocks property assignment; remove it to fix [OK]

Hint: Remove Readonly to allow property updates [OK]

Common Mistakes:

• Trying to assign to readonly property instead of removing Readonly
• Using 'as const' which makes object deeply readonly
• Changing variable declaration without fixing immutability

5. Given this nested object type, how can you make all properties readonly including nested ones?

interface Settings {
  theme: string;
  layout: {
    header: boolean;
    footer: boolean;
  };
}

hard

A. Use a custom DeepReadonly type that recursively applies Readonly

B. Use Partial<Settings> to make properties readonly

C. Use readonly Settings keyword

D. Use Readonly<Settings> only

Solution

1. Step 1: Understand shallow vs deep readonly

   The built-in Readonly utility only makes the top-level properties readonly. Nested objects remain mutable.

2. Step 2: Use a recursive DeepReadonly type

   To make nested properties readonly, you need a custom type that applies Readonly recursively to all nested objects.

3. Final Answer:

   Use a custom DeepReadonly type that recursively applies Readonly -> Option A

4. Quick Check:

   Readonly is shallow; use DeepReadonly for nested [OK]

Hint: Readonly is shallow; use recursive type for nested readonly [OK]

Common Mistakes:

• Assuming Readonly makes nested properties readonly
• Using 'readonly' keyword incorrectly on types
• Confusing Partial with Readonly