Why mapped types are needed in Typescript - Visual Breakdown

Concept Flow - Why mapped types are needed

Start with a type

↓

Apply mapped type

↓

Transform each property

↓

Create new type with changes

↓

Use new type safely in code

Mapped types take an existing type and create a new type by transforming each property, helping to avoid repetitive code and keep types consistent.

Execution Sample

Typescript

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

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

This code creates a new type ReadonlyUser where all properties of User become readonly.

Execution Table

Step	Action	Property (K)	Original Type	Mapped Type	Resulting Property
1	Start with User type	-	-	-	{ name: string; age: number; }
2	Iterate property	name	string	readonly string	readonly name: string;
3	Iterate property	age	number	readonly number	readonly age: number;
4	Combine properties	-	-	-	{ readonly name: string; readonly age: number; }
5	Assign to ReadonlyUser	-	-	-	ReadonlyUser type created

💡 All properties processed and transformed to readonly, mapped type creation complete.

Variable Tracker

Variable	Start	After 1	After 2	Final
K	-	name	age	-
User[K]	-	string	number	-
Mapped Property	-	readonly name: string	readonly age: number	-

Key Moments - 2 Insights

Why do we need to write [K in keyof User] instead of listing properties manually?

Using [K in keyof User] automatically applies the transformation to all properties, so if User changes, ReadonlyUser updates too. This is shown in execution_table rows 2 and 3 where each property is processed.

What does 'readonly' do in the mapped type?

'readonly' makes properties immutable, preventing changes after creation. Execution_table rows 2 and 3 show how each property becomes readonly.

Visual Quiz - 3 Questions

Look at the execution_table, what is the mapped type of the 'age' property at step 3?

A number

B string

C readonly number

D readonly string

💡 Hint

Check the 'Mapped Type' column at step 3 in the execution_table.

At which step does the mapped type combine all transformed properties into the new type?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for the step where properties are combined in the execution_table.

If a new property 'email: string' is added to User, how would the variable 'K' change in variable_tracker?

A It would include 'email' after the last property

B It would stay the same with only 'name' and 'age'

C It would remove 'age'

D It would become empty

💡 Hint

Mapped types iterate over all keys in 'keyof User' as shown in variable_tracker.

Concept Snapshot

Mapped types let you create new types by transforming each property of an existing type.
Syntax: { [K in keyof Type]: Transformation }
They keep types consistent and reduce repetition.
Example: making all properties readonly.
Useful for safe, flexible type changes.

Full Transcript

Mapped types in TypeScript help create new types by changing each property of an existing type automatically. Instead of writing each property manually, you use a syntax like [K in keyof Type] to loop over all properties. For example, you can make all properties readonly by adding 'readonly' before each property. This keeps your types consistent and easy to update if the original type changes. The execution table shows how each property is processed step-by-step, and the variable tracker shows how the property keys and types change during mapping. This approach avoids repetitive code and helps maintain safe, flexible type definitions.