Basic mapped type syntax in Typescript - Step-by-Step Execution

Concept Flow - Basic mapped type syntax

Start with Keys

↓

Iterate over Keys

↓

Apply Transformation

↓

Build New Type

↓

Resulting Mapped Type

Mapped types take each key from an existing type and create a new type by applying a transformation to each key.

Execution Sample

Typescript

type Options = {
  width: number;
  height: number;
};

type ReadonlyOptions = {
  readonly [K in keyof Options]: Options[K];
};

This code creates a new type ReadonlyOptions by making all properties of Options readonly using mapped type syntax.

Execution Table

Step	Action	Key (K)	Original Type (Options[K])	Mapped Property	Resulting Property Type
1	Start mapping
2	Iterate key	width	number	readonly width	number
3	Iterate key	height	number	readonly height	number
4	Finish mapping				ReadonlyOptions type created

💡 All keys from Options processed, mapped type ReadonlyOptions created with readonly properties.

Variable Tracker

Variable	Start	After 1	After 2	Final
K	undefined	width	height	all keys processed
Mapped Property	none	readonly width	readonly height	readonly width, readonly height
Resulting Type	none	{ readonly width: number }	{ readonly width: number; readonly height: number }	ReadonlyOptions

Key Moments - 2 Insights

Why do we use 'in keyof Options' in the mapped type?

Because 'keyof Options' gets all keys from Options type, and 'in' iterates over each key to create properties in the new type, as shown in execution_table rows 2 and 3.

What does 'readonly' do in the mapped type?

'readonly' makes each property immutable, so you cannot change its value after creation. This is shown in the 'Mapped Property' column in execution_table rows 2 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the mapped property created for the key 'height'?

A readonly width

B height

C readonly height

D width

💡 Hint

Check execution_table row 3 under 'Mapped Property' column.

At which step does the mapped type finish creating all properties?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Look at execution_table row 4 where it says 'Finish mapping'.

If we remove 'readonly' from the mapped type, what changes in the resulting type?

A Properties become optional

B Properties become mutable (can be changed)

C Keys are removed

D Type becomes a function

💡 Hint

Refer to key_moments about what 'readonly' does to properties.

Concept Snapshot

Mapped types syntax:
  type NewType = { [K in keyof OldType]: OldType[K] };
Use 'in keyof' to loop keys.
Add modifiers like 'readonly' to change properties.
Creates new types by transforming existing ones.

Full Transcript

Mapped types in TypeScript let you create new types by looping over keys of an existing type and applying changes. The syntax uses '[K in keyof OldType]' to iterate keys. For example, making all properties readonly uses 'readonly [K in keyof OldType]: OldType[K]'. The execution table shows each key processed and the resulting property. Beginners often wonder why 'in keyof' is used and what 'readonly' does. 'in keyof' loops keys, and 'readonly' makes properties immutable. The visual quiz checks understanding of these steps and effects. This helps you create flexible and safe types easily.