Mapped type modifiers (readonly, optional) in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make all properties of Person readonly.

Typescript

type ReadonlyPerson = { readonly [K in keyof Person][1] };

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

A: Person[K]

B? Person[K]

C= Person[K]

D- Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of ':' after the mapped key.

Omitting the property type after the key.

Using '=' instead of ':'.

In mapped types, readonly [K in keyof Person]: Person[K] makes all properties readonly by adding readonly and keeping the property types.

2fill in blank

medium

Complete the code to make all properties of Person optional.

Typescript

type OptionalPerson = { [K in keyof Person][1] };

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

A? Person[K]

B: Person[K]

C- Person[K]

D= Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' instead of '?' after the key.

Forgetting to specify the property type.

Using '=' instead of ':'.

Adding ? after the key in a mapped type makes the property optional.

3fill in blank

hard

Fix the error in the mapped type to remove the readonly modifier from all properties.

Typescript

type MutablePerson = { -readonly [K in keyof Person][1] };

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

A? Person[K]

B= Person[K]

C: Person[K]

D- Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of ':' after the key.

Using '=' instead of ':'.

Omitting the property type.

The -readonly modifier removes the readonly attribute, and the property type must follow a colon.

4fill in blank

hard

Fill both blanks to create a mapped type that makes all properties readonly and optional.

Typescript

type ReadonlyOptionalPerson = { readonly [K in keyof Person][1] };

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

A? Person[K]

B: Person[K]

C- Person[K]

D= Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Placing the colon before the question mark.

Omitting the readonly modifier.

Using '=' instead of ':'.

To make properties both readonly and optional, add readonly before the key and ? after the key, then specify the type with a colon.

5fill in blank

hard

Fill all three blanks to create a mapped type that removes readonly and optional modifiers from all properties.

Typescript

type RequiredMutablePerson = { -readonly [K in keyof Person][1] };

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

A?

B: Person[K]

C-?

D= Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of '-?' to remove optional.

Omitting the colon before the property type.

Using '=' instead of ':'.

To remove readonly and optional modifiers, use -readonly before the key and -? after the key, then specify the property type with a colon. The -? removes optionality.

Practice

1.

What does the readonly modifier do when used in a mapped type in TypeScript?

easy

A. It allows properties to be changed freely.

B. It makes all properties optional.

C. It removes all properties from the type.

D. It makes all properties unchangeable (immutable).

Solution

1. Step 1: Understand the readonly modifier

   The readonly keyword in TypeScript means the property cannot be changed after initialization.

2. Step 2: Apply to mapped types

   When used in a mapped type, it makes all properties of the type unchangeable.

3. Final Answer:

   It makes all properties unchangeable (immutable). -> Option D

4. Quick Check:

   readonly = immutable [OK]

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

Common Mistakes:

• Confusing readonly with optional
• Thinking readonly removes properties
• Assuming readonly allows changes

2.

Which of the following is the correct syntax to make all properties optional in a mapped type?

type PartialType<T> = { ? }

easy

A. type PartialType<T> = { [P in keyof T]?: T[P]; }

B. type PartialType<T> = { [P in keyof T]: T[P]?; }

C. type PartialType<T> = { [P in keyof T]-?: T[P]; }

D. type PartialType<T> = { readonly [P in keyof T]: T[P]; }

Solution

1. Step 1: Recall optional property syntax

   In TypeScript, adding ? after a property name makes it optional.

2. Step 2: Apply optional modifier in mapped type

   The correct syntax is [P in keyof T]?: T[P] to make all properties optional.

3. Final Answer:

   type PartialType<T> = { [P in keyof T]?: T[P]; } -> Option A

4. Quick Check:

   Optional properties use ?: [OK]

Hint: Use ?: after property name to make it optional [OK]

Common Mistakes:

• Placing ? after the type instead of property
• Using -? which removes optional
• Confusing readonly with optional

3.

What is the output type of the following code?

type User = { name: string; age: number };
type ReadonlyUser = { readonly [K in keyof User]: User[K] };

const user: ReadonlyUser = { name: "Alice", age: 30 };
user.age = 31;

medium

A. No error, user.age is updated to 31.

B. No error, but user.age remains 30.

C. Error: Cannot assign to 'age' because it is a read-only property.

D. Error: Property 'age' does not exist on type 'ReadonlyUser'.

Solution

1. Step 1: Understand the mapped type with readonly

   The type ReadonlyUser makes all properties of User readonly.

2. Step 2: Check assignment to readonly property

   Trying to assign user.age = 31 causes a compile-time error because age is readonly.

3. Final Answer:

   Error: Cannot assign to 'age' because it is a read-only property. -> Option C

4. Quick Check:

   Readonly properties cannot be assigned new values [OK]

Hint: Assigning to readonly property causes error [OK]

Common Mistakes:

• Assuming readonly allows updates
• Thinking property disappears
• Confusing runtime error with compile error

4.

Identify the error in this mapped type that tries to make all properties optional:

type OptionalType<T> = { [P in keyof T]-?: T[P]; };

medium

A. The syntax is correct; no error.

B. The -? removes optional, so properties are required, not optional.

C. The -? makes properties readonly, causing error.

D. The mapped type is missing a return type.

Solution

1. Step 1: Understand -? modifier

   The -? removes the optional modifier from properties, making them required.

2. Step 2: Check effect on properties

   Since the goal was to make properties optional, using -? is the opposite and causes the error.

3. Final Answer:

   The -? removes optional, so properties are required, not optional. -> Option B

4. Quick Check:

   -? removes optional [OK]

Hint: -? removes optional, ?: adds optional [OK]

Common Mistakes:

• Confusing -? with readonly
• Thinking -? adds optional
• Ignoring the effect of modifiers

5.

Given the type below, which mapped type correctly makes all properties both readonly and optional?

type Config = { url: string; timeout: number; debug: boolean };

hard

A. type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] }

B. type ReadonlyOptional<T> = { [P in keyof T]?: readonly T[P] }

C. type ReadonlyOptional<T> = { [P in keyof T]-?: readonly T[P] }

D. type ReadonlyOptional<T> = { readonly [P in keyof T]-?: T[P] }

Solution

1. Step 1: Combine readonly and optional modifiers

   To make properties readonly and optional, use readonly before the property and ? after the property name.

2. Step 2: Analyze each option

   type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] } correctly places readonly before and ? after the property name. Others misuse readonly or optional placement.

3. Final Answer:

   type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] } -> Option A

4. Quick Check:

   readonly before, optional after property name [OK]

Hint: Put readonly before and ? after property name [OK]

Common Mistakes:

• Placing readonly after the type
• Using -? which removes optional
• Confusing readonly with optional placement