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.

Practice

1. Why are mapped types needed in TypeScript?

easy

A. To create new types by transforming all properties of an existing type easily

B. To write functions that return multiple values

C. To define classes with private members

D. To handle asynchronous operations

Solution

1. Step 1: Understand the purpose of mapped types

   Mapped types allow you to take an existing type and create a new type by changing all its properties in a consistent way.

2. Step 2: Compare with other options

   Options B, C, and D relate to other TypeScript or JavaScript features but do not describe mapped types.

3. Final Answer:

   To create new types by transforming all properties of an existing type easily -> Option A

4. Quick Check:

   Mapped types = transform all properties easily [OK]

Hint: Mapped types transform all properties of a type at once [OK]

Common Mistakes:

• Confusing mapped types with functions or classes
• Thinking mapped types handle async code
• Believing mapped types define private members

2. Which of the following is the correct syntax to create a mapped type that makes all properties of T readonly?

easy

A. type Readonly<T> = { [P in T]: readonly T[P] }

B. type Readonly<T> = { [P in keyof T]: readonly T[P] }

C. type Readonly<T> = { readonly T[P] in keyof T }

D. type Readonly<T> = { readonly [P in keyof T]: T[P] }

Solution

1. Step 1: Analyze mapped type syntax

   The correct syntax uses [P in keyof T] to iterate over keys and applies readonly before the property name.

2. Step 2: Identify errors in other options

   type Readonly<T> = { [P in keyof T]: readonly T[P] } incorrectly places readonly after the colon. type Readonly<T> = { [P in T]: readonly T[P] } uses [P in T] which is invalid. type Readonly<T> = { readonly T[P] in keyof T } has incorrect order and syntax.

3. Final Answer:

   type Readonly<T> = { readonly [P in keyof T]: T[P] } -> Option D

4. Quick Check:

   Mapped type syntax = readonly before [P in keyof T] [OK]

Hint: Use 'readonly [P in keyof T]' to make properties readonly [OK]

Common Mistakes:

• Placing readonly after the property type
• Using wrong iteration syntax like [P in T]
• Misordering readonly and the mapped key

3. Given the code below, what is the type of OptionalUser?

type User = { id: number; name: string; };
type OptionalUser = { [P in keyof User]?: User[P] };

medium

A. { id: number; name: string; }

B. { id: number | undefined; name: string | undefined; }

C. { id?: number; name?: string; }

D. Error: Invalid mapped type syntax

Solution

1. Step 1: Understand the mapped type with optional modifier

   The ? after [P in keyof User] makes each property optional.

2. Step 2: Compare with options

   { id?: number; name?: string; } correctly shows all properties optional. { id: number; name: string; } is original type. { id: number | undefined; name: string | undefined; } uses union with undefined which is different. Error: Invalid mapped type syntax is incorrect as syntax is valid.

3. Final Answer:

   { id?: number; name?: string; } -> Option C

4. Quick Check:

   Mapped type with ? = all properties optional [OK]

Hint: Adding ? after [P in keyof T] makes properties optional [OK]

Common Mistakes:

• Confusing optional properties with union types
• Thinking original type remains unchanged
• Assuming syntax error in mapped types

4. Identify the error in the following mapped type and fix it:

type ReadonlyUser<T> = { [P in keyof T] T[P] readonly }

medium

A. Remove readonly modifier completely

B. The readonly modifier should come before the property name: { readonly [P in keyof T]: T[P] }

C. Change keyof T to keyof User

D. Add a semicolon after T[P]

Solution

1. Step 1: Check mapped type syntax

   The readonly modifier must be placed before the property name in mapped types.

2. Step 2: Correct the syntax

   Rewrite as { readonly [P in keyof T]: T[P] } to fix the error.

3. Final Answer:

   The readonly modifier should come before the property name: { readonly [P in keyof T]: T[P] } -> Option B

4. Quick Check:

   readonly before [P in keyof T] fixes syntax [OK]

Hint: Place readonly before the mapped key, not after the type [OK]

Common Mistakes:

• Putting readonly after the property type
• Confusing property name and type order
• Ignoring mapped type syntax rules

5. You want to create a mapped type that converts all properties of a type T to strings, regardless of their original type. Which mapped type correctly achieves this?

hard

A. type Stringify<T> = { [P in keyof T]: string }

B. type Stringify<T> = { [P in keyof T]: T[P] extends string ? string : never }

C. type Stringify<T> = { [P in keyof T]: T[P] & string }

D. type Stringify<T> = { [P in keyof T]: keyof string }

Solution

1. Step 1: Understand the goal

   We want all properties to become type string, ignoring original types.

2. Step 2: Analyze each option

   type Stringify<T> = { [P in keyof T]: string } sets every property to string directly. type Stringify<T> = { [P in keyof T]: T[P] extends string ? string : never } uses conditional types but returns never for non-string types, which is incorrect. type Stringify<T> = { [P in keyof T]: T[P] & string } intersects with string, which does not convert types. type Stringify<T> = { [P in keyof T]: keyof string } uses keyof string which is invalid.

3. Final Answer:

   type Stringify<T> = { [P in keyof T]: string } -> Option A

4. Quick Check:

   Assign string directly to all properties [OK]

Hint: Assign string type directly to all keys in mapped type [OK]

Common Mistakes:

• Using conditional types incorrectly
• Trying to intersect types instead of replacing
• Misusing keyof operator on primitive types