Mapped type with conditional types in Typescript - Step-by-Step Execution

Concept Flow - Mapped type with conditional types

Start with original type

↓

Iterate over each key in type

↓

Apply conditional check on key's type

Yes No↓

Transform type

↓

Build new mapped type with transformed properties

↓

Resulting type

We take each property of a type, check its type with a condition, and then transform it or keep it, building a new type.

Execution Sample

Typescript

type Flags<T> = {
  [K in keyof T]: T[K] extends boolean ? number : string
};

This code creates a new type where boolean properties become number, others become string.

Execution Table

Step	Key (K)	Original Type T[K]	Condition (T[K] extends boolean?)	Resulting Type for K
1	"isActive"	boolean	Yes	number
2	"name"	string	No	string
3	"count"	number	No	string
4	"isAdmin"	boolean	Yes	number
5	All keys processed	-	-	Mapped type complete

💡 All keys in the original type have been checked and transformed accordingly.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
MappedType	{}	{"isActive": number}	{"isActive": number, "name": string}	{"isActive": number, "name": string, "count": string}	{"isActive": number, "name": string, "count": string, "isAdmin": number}	{"isActive": number, "name": string, "count": string, "isAdmin": number}

Key Moments - 2 Insights

Why does the type for "name" become string instead of number?

Because the condition checks if the original type extends boolean. "name" is string, so condition is false, and it keeps string as per the 'No' branch in the execution_table.

What happens if a property type is boolean?

If the property type is boolean, the condition is true, so the mapped type changes that property to number, as shown for "isActive" and "isAdmin" in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the resulting type for the key "count"?

A boolean

B string

C number

D never

💡 Hint

Check the row where Key is "count" and see the Resulting Type column.

At which step does the condition become false for the first time?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the Condition column in execution_table and find the first 'No'.

If we change the condition to check for number instead of boolean, what would be the resulting type for "count"?

A number

B string

C boolean

D never

💡 Hint

Refer to how the condition affects the resulting type in execution_table and variable_tracker.

Concept Snapshot

Mapped types let you create new types by looping over keys.
Conditional types let you choose types based on conditions.
Together, you check each property type and transform it.
Syntax: {[K in keyof T]: T[K] extends Condition ? TrueType : FalseType}
Use to customize types based on property types.

Full Transcript

This visual execution shows how a mapped type with conditional types works in TypeScript. We start with an original type that has keys with different types. For each key, we check if its type extends boolean. If yes, we change that property's type to number; if no, we change it to string. The execution table traces each key, the condition result, and the resulting type. The variable tracker shows how the new mapped type builds up step by step. Key moments clarify why some properties change type and others do not. The quiz tests understanding of the condition and resulting types. This helps beginners see how mapped and conditional types combine to create flexible new types.