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.

Practice

1. What does a mapped type with conditional types do in TypeScript?
type Example<T> = { [K in keyof T]: T[K] extends string ? number : boolean }

easy

A. It creates a new type where string properties become number and others become boolean.

B. It creates a new type with all properties removed.

C. It changes all properties to string type.

D. It only keeps properties that are strings.

Solution

1. Step 1: Understand mapped types

   Mapped types loop over each key in the original type to create a new type with transformed properties.

2. Step 2: Apply conditional types

   The conditional type checks if the property type extends string; if yes, it changes to number, else to boolean.

3. Final Answer:

   It creates a new type where string properties become number and others become boolean. -> Option A

4. Quick Check:

   Mapped + conditional changes types based on condition [OK]

Hint: Mapped types loop keys; conditional types pick types by condition [OK]

Common Mistakes:

• Thinking it removes properties instead of transforming them
• Assuming all types become string
• Confusing conditional type logic

2. Which of the following is the correct syntax for a mapped type with a conditional type in TypeScript?

easy

A. type NewType<T> = { [K in T]: T[K] extends number ? string : boolean }

B. type NewType<T> = { [K in keyof T]: T[K] extends number ? string : boolean }

C. type NewType<T> = { [K of keyof T]: T[K] extends number ? string : boolean }

D. type NewType<T> = { K in keyof T: T[K] ? string : boolean }

Solution

1. Step 1: Check mapped type syntax

   The correct syntax uses square brackets with 'in' keyword: [K in keyof T].

2. Step 2: Verify conditional type usage

   The conditional type is written as T[K] extends number ? string : boolean, which is correct.

3. Final Answer:

   type NewType<T> = { [K in keyof T]: T[K] extends number ? string : boolean } -> Option B

4. Quick Check:

   Mapped type syntax = [K in keyof T] [OK]

Hint: Mapped types use [K in keyof T], not 'of' or missing brackets [OK]

Common Mistakes:

• Using 'K in T' instead of 'K in keyof T'
• Using 'K of keyof T' which is invalid
• Missing square brackets around K in mapped type

3. Given the code:

type Flags = { a: string; b: number; c: boolean };
type Result = { [K in keyof Flags]: Flags[K] extends number ? 'num' : 'not-num' };
const test: Result = { a: 'not-num', b: 'num', c: 'not-num' };

What is the type of test.b?

medium

A. 'not-num'

B. number

C. 'num'

D. boolean

Solution

1. Step 1: Analyze the mapped type Result

   For each key in Flags, if the property type is number, Result's property is 'num', else 'not-num'.

2. Step 2: Check property b in Flags

   b is number, so Result['b'] is 'num'.

3. Final Answer:

   'num' -> Option C

4. Quick Check:

   Flags['b'] is number, so Result['b'] = 'num' [OK]

Hint: Check original type, then apply conditional mapping [OK]

Common Mistakes:

• Confusing original property type with mapped type
• Assuming test.b is number instead of 'num'
• Ignoring conditional type logic

4. Identify the error in this mapped type:

type Fix<T> = { [P in keyof T]: T[P] extends string ? number : }

medium

A. Incorrect use of keyof operator

B. Cannot use conditional types inside mapped types

C. Square brackets missing around P

D. Missing type after colon in conditional type

Solution

1. Step 1: Check conditional type syntax

   Conditional types require both true and false branches separated by colon.

2. Step 2: Identify missing false branch

   The code ends with ':' but no type after it, causing syntax error.

3. Final Answer:

   Missing type after colon in conditional type -> Option D

4. Quick Check:

   Conditional types need both branches [OK]

Hint: Conditional types need both true and false parts [OK]

Common Mistakes:

• Leaving out false branch in conditional type
• Misplacing square brackets in mapped type
• Thinking keyof is wrong here

5. How can you create a mapped type that keeps only the keys of an object whose values are assignable to a specific type, for example, only keys with string values?
Choose the correct mapped type:

hard

A. type FilterStrings<T> = { [K in keyof T as T[K] extends string ? K : never]: T[K] }

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

C. type FilterStrings<T> = { [K in keyof T]: T[K] extends string ? string : never }

D. type FilterStrings<T> = { [K in keyof T]: K extends string ? T[K] : never }

Solution

1. Step 1: Understand key remapping in mapped types

   Using 'as' allows filtering keys by condition, replacing keys with 'never' to omit them.

2. Step 2: Check each option

   type FilterStrings<T> = { [K in keyof T as T[K] extends string ? K : never]: T[K] } correctly uses 'as' with conditional to keep keys where T[K] extends string; others become never (excluded).

3. Final Answer:

   type FilterStrings<T> = { [K in keyof T as T[K] extends string ? K : never]: T[K] } -> Option A

4. Quick Check:

   Key remapping with 'as' filters keys [OK]

Hint: Use 'as' with conditional to filter keys in mapped types [OK]

Common Mistakes:

• Not using 'as' for key filtering
• Returning never as value instead of key
• Confusing key and value conditions