Mapped type for deep transformations in Typescript - Step-by-Step Execution

Concept Flow - Mapped type for deep transformations

Start with object type

↓

Check each property

↓

Is property a nested object?

No→Apply transformation to property

Yes↓

Recursively apply mapped type to nested object

↓

Combine transformed properties

↓

Return new transformed type

This flow shows how a mapped type checks each property of an object type, applies a transformation, and if the property is itself an object, applies the transformation recursively.

Execution Sample

Typescript

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K]
};

This code creates a type that makes all properties of an object and its nested objects readonly.

Execution Table

Step	Property	Check if object	Action	Resulting Type
1	name	No	Apply readonly	readonly name: string
2	details	Yes	Recursively apply DeepReadonly	readonly details: DeepReadonly<{ age: number; address: { city: string; } }>
3	details.age	No	Apply readonly	readonly age: number
4	details.address	Yes	Recursively apply DeepReadonly	readonly address: DeepReadonly<{ city: string; }>
5	details.address.city	No	Apply readonly	readonly city: string
6	End	-	-	Final DeepReadonly type created
7	Exit	-	-	All properties processed

💡 All properties and nested properties have been processed and transformed to readonly.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
T	{ name: string; details: { age: number; address: { city: string; } } }	{ name: string; details: { age: number; address: { city: string; } } }	{ name: string; details: { age: number; address: { city: string; } } }	{ name: string; details: { age: number; address: { city: string; } } }	{ name: string; details: { age: number; address: { city: string; } } }	DeepReadonly<{ name: string; details: { age: number; address: { city: string; } } } >

Key Moments - 2 Insights

Why do we check if a property is an object before applying the transformation?

Because only objects can have nested properties that need recursive transformation. Primitive types like string or number are transformed directly without recursion, as shown in steps 1 and 3 of the execution_table.

What happens if a property is an array or function?

In this example, arrays and functions are treated as objects, so the transformation recurses into them. This can cause unexpected behavior unless handled specifically. The execution_table assumes only plain objects for simplicity.

Visual Quiz - 3 Questions

Look at the execution_table, what is the resulting type for the property 'details.address.city' at step 5?

A readonly city: string

B city: string

C readonly address: string

D readonly city: number

💡 Hint

Check row 5 in the execution_table under 'Resulting Type' column.

At which step does the mapped type stop recursing deeper?

A Step 6

B Step 3

C Step 5

D Step 2

💡 Hint

Look for the last property checked that is not an object in the execution_table.

If the property 'details' was a string instead of an object, how would the action at step 2 change?

A It would skip the property

B It would apply readonly directly without recursion

C It would recurse deeper anyway

D It would cause a type error

💡 Hint

Refer to the condition 'Check if object' in execution_table step 2.

Concept Snapshot

Mapped type for deep transformations:
- Syntax: type NewType<T> = { [K in keyof T]: T[K] extends object ? NewType<T[K]> : Transform<T[K]> };
- Recursively applies transformation to nested objects
- Stops recursion on non-object types
- Useful for deep readonly, partial, or other modifications
- Remember to handle special cases like arrays or functions explicitly

Full Transcript

This visual execution shows how a mapped type in TypeScript can transform an object type deeply. Starting with an object type, each property is checked. If the property is an object, the mapped type applies itself recursively to transform nested properties. If not, it applies the transformation directly. The example uses DeepReadonly to make all properties readonly, including nested ones. The execution table traces each property step-by-step, showing when recursion happens and when it stops. Key moments clarify why the object check is important and what happens with arrays or functions. The quiz tests understanding of the recursion steps and property transformations. The snapshot summarizes the syntax and behavior for quick reference.