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.