Mapped type modifiers (readonly, optional) in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a mapped type with readonly modifier

What is the type of ReadonlyPerson after applying the mapped type with readonly modifier?

Typescript

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

const p: ReadonlyPerson = { name: "Alice", age: 30 };
p.name = "Bob"; // What happens here?

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

B No error, p.name is changed to 'Bob'.

C Runtime error: Cannot assign to read-only property 'name'.

D Compilation error: Property 'name' does not exist on type 'ReadonlyPerson'.

💡 Hint

Readonly mapped types make all properties immutable at compile time.

The readonly modifier in a mapped type makes all properties read-only. Trying to assign a new value to p.name causes a compile-time error.

❓ Predict Output

intermediate

Effect of optional modifier in mapped types

Given the mapped type below, what is the type of PartialPerson?

Typescript

type Person = { name: string; age: number };
type PartialPerson = {
  [K in keyof Person]?: Person[K];
};

const p: PartialPerson = { name: "Alice" };

A { name?: string; age: number; }

B { name: string; age: number; }

C { name?: string | undefined; age?: number | undefined; }

D { name: string | undefined; age: number | undefined; }

💡 Hint

The optional modifier adds '?' to all properties.

The ? in the mapped type makes all properties optional, so both name and age become optional with their original types.

🔧 Debug

advanced

Identify the error in mapped type modifiers usage

Which option contains a syntax error in the mapped type modifiers usage?

Typescript

type Flags = { a: boolean; b: boolean };
type ModifiedFlags = {
  +readonly [K in keyof Flags]-?: Flags[K];
};

A type ModifiedFlags = { +readonly -? [K in keyof Flags]; Flags[K]; };

B type ModifiedFlags = { readonly [K in keyof Flags]-?: Flags[K]; };

C type ModifiedFlags = { +readonly [K in keyof Flags]-?: Flags[K] };

D type ModifiedFlags = { +readonly [K in keyof Flags]-?: Flags[K]; };

💡 Hint

Check the syntax for mapped type modifiers and property declarations.

Option A is invalid because it uses a semicolon instead of a colon between the property name and type, causing a syntax error.

❓ Predict Output

advanced

Combined readonly and optional modifiers in mapped types

What is the resulting type of ReadonlyPartial?

Typescript

type User = { id: number; name: string };
type ReadonlyPartial = {
  readonly [K in keyof User]?: User[K];
};

A { id?: number; name?: string; }

B { readonly id?: number | undefined; readonly name?: string | undefined; }

C { readonly id: number; readonly name: string; }

D { id: number; name: string; }

💡 Hint

Both readonly and optional modifiers apply to all properties.

The mapped type applies readonly and ? to each property, making them read-only and optional.

🧠 Conceptual

expert

Understanding the effect of removing modifiers in mapped types

Given the type below, what does the -readonly and -? modifiers do in the mapped type?

Typescript

type Config = { readonly host?: string; readonly port?: number };
type MutableRequiredConfig = {
  -readonly [K in keyof Config]-?: Config[K];
};

A Removes optional but keeps properties readonly.

B Adds readonly and optional modifiers, making all properties immutable and optional.

C Removes readonly but keeps properties optional.

D Removes readonly and optional modifiers, making all properties mutable and required.

💡 Hint

Minus modifiers remove the specified property modifiers.

The -readonly removes the readonly modifier, and -? removes the optional modifier, so all properties become mutable and required.

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