Mapped type with conditional types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a conditional mapped type

What is the type of Result after this code runs?

Typescript

type Flags = {
  a: string;
  b: number;
  c: boolean;
};

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

type Result = ConditionalMapped<Flags>;

A { a: string; b: string; c: boolean; }

B { a: boolean; b: boolean; c: boolean; }

C { a: boolean; b: number; c: boolean; }

D { a: boolean; b: string; c: boolean; }

💡 Hint

Check which properties have type number and what the conditional changes them to.

The mapped type checks each property type. If it extends number, it becomes string; otherwise boolean. So 'b' is number, becomes string; 'a' and 'c' become boolean.

❓ Predict Output

intermediate

Mapped type filtering keys by conditional

What is the type of Filtered after this code runs?

Typescript

type Data = {
  id: number;
  name: string;
  active: boolean;
};

type FilterByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

type Filtered = FilterByType<Data, string>;

A { name: string; }

B { id: number; }

C { id: number; name: string; active: boolean; }

D { active: boolean; }

💡 Hint

Look at the conditional key remapping and which keys match the type string.

The mapped type keeps keys whose value type extends string. Only 'name' is string, so Filtered has only 'name'.

🔧 Debug

advanced

Why does this mapped type cause an error?

This code causes a TypeScript error. What is the cause?

Typescript

type Example<T> = {
  [K in keyof T]: T[K] extends string ? K : never;
};

type Result = Example<{ a: string; b: number; }>;

A The type parameter T is missing a constraint causing error.

B Mapped type values must be types, but here keys are used as values causing error.

C Keys cannot be used in mapped types, only values are allowed.

D The conditional expression is invalid syntax inside mapped types.

💡 Hint

Mapped types define property types, not keys as values.

Mapped types define property types for each key. Returning keys (K) as values is invalid because keys are not types. The value must be a type, not a key name.

❓ Predict Output

advanced

Output type of nested conditional mapped type

What is the type of NestedResult after this code runs?

Typescript

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

type Input = { x: number; y: boolean; z: string };

type NestedResult = Nested<Input>;

A { x: string; y: boolean; z: string; }

B { x: number; y: number; z: string; }

C { x: string; y: number; z: string; }

D { x: string; y: string; z: string; }

💡 Hint

Check each property type and apply the nested conditional rules carefully.

For 'x' number → string; 'y' boolean → number; 'z' string → string (unchanged).

🧠 Conceptual

expert

How many keys remain after conditional key remapping?

Given this type, how many keys does Final have?

Typescript

type Original = {
  a: string;
  b: number;
  c: boolean;
  d: string | number;
};

type FilterKeys<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

type Final = FilterKeys<Original>;

A 1

B 2

C 3

D 4

💡 Hint

Check which properties extend string exactly, not unions including string.

Only 'a' is exactly string. 'd' is string | number, which does not extend string alone, so it is excluded. So Final has 1 key.

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