Mapped type modifiers (readonly, optional) in Typescript - Step-by-Step Execution

Concept Flow - Mapped type modifiers (readonly, optional)

Start with base type

↓

Apply mapped type

↓

Add modifiers?

↓

Add readonly

↓

Add optional

↓

Resulting type

Start with a base type, then create a new type by mapping over its keys, optionally adding readonly and/or optional modifiers to each property.

Execution Sample

Typescript

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

// Make all properties readonly and optional

type ReadonlyOptionalUser = {
  readonly [K in keyof User]?: User[K];
};

This code creates a new type where all properties of User are readonly and optional.

Execution Table

Step	Key (K)	Original Type	Modifier Applied	Resulting Property
1	name	string	readonly + optional	readonly name?: string
2	age	number	readonly + optional	readonly age?: number
3	-	-	-	Mapped type complete with all properties readonly and optional

💡 All keys processed, mapped type modifiers applied to each property.

Variable Tracker

Variable	Start	After 1	After 2	Final
K	-	name	age	-
User[K]	-	string	number	-
Property Modifier	-	readonly + optional	readonly + optional	-

Key Moments - 3 Insights

Why do properties become optional with a question mark in the mapped type?

Because the '?' after the property name in the mapped type syntax makes each property optional, as shown in execution_table rows 1 and 2.

What does the 'readonly' modifier do in the mapped type?

It makes each property read-only, meaning you cannot change its value after creation. This is shown in execution_table rows 1 and 2 where 'readonly' is applied.

Can we apply only one modifier, like just 'readonly' or just 'optional'?

Yes, you can apply either or both. The mapped type syntax lets you add modifiers independently, as seen in the concept_flow where modifiers are optional steps.

Visual Quiz - 3 Questions

Look at the execution_table, what is the resulting property for the key 'age'?

A readonly age?: number

B age?: number

C age: number

D readonly age: number

💡 Hint

Check execution_table row 2 under 'Resulting Property' column.

At which step does the mapped type finish processing all keys?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the exit note and the last row in execution_table.

If we remove the '?' modifier, how would the properties change in the resulting type?

A Properties become optional and readonly

B Properties become required but remain readonly

C Properties become required and writable

D Properties become optional and writable

💡 Hint

Refer to the meaning of '?' in the key moments and execution_table modifiers.

Concept Snapshot

Mapped types let you create new types by looping over keys of an existing type.
Use modifiers like 'readonly' to prevent changes and '?' to make properties optional.
Syntax: { readonly [K in keyof T]?: T[K] } makes all properties readonly and optional.
You can apply modifiers independently or together.
This helps create flexible and safe type transformations.

Full Transcript

Mapped type modifiers in TypeScript let you change properties of a type by looping over its keys. You can add 'readonly' to make properties unchangeable and '?' to make them optional. For example, starting with a User type with name and age, applying readonly and optional modifiers creates a new type where name and age cannot be changed and are not required. The execution table shows each key processed step-by-step, applying modifiers to produce the final mapped type. Beginners often wonder why properties become optional or what readonly means; these are clarified by looking at the modifiers in the mapped type syntax. You can apply either modifier alone or both together to customize your new type.

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