Nested conditional types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested conditional type with string and number

What is the type of Result after evaluating the following code?

Typescript

type Nested<T> = T extends string ? (T extends "hello" ? "Greeting" : "String") : (T extends number ? "Number" : "Other");
type Result = Nested<"hello">;

A "Number"

B "String"

C "Greeting"

D "Other"

💡 Hint

Check how the nested conditions evaluate for the literal type "hello".

The type parameter T is "hello", which extends string, so the first condition is true. Then it checks if T extends "hello" specifically, which is true, so the result is "Greeting".

❓ Predict Output

intermediate

Nested conditional type with union type

What is the type of Result after evaluating this code?

Typescript

type Nested<T> = T extends string ? (T extends "a" ? 1 : 2) : (T extends number ? 3 : 4);
type Result = Nested<"a" | number>;

A 1 | 3

B 1 | 2 | 3

C 1 | 2 | 3 | 4

D 2 | 3

💡 Hint

Remember conditional types distribute over unions.

Conditional types distribute over unions. For "a", Nested returns 1. For number, Nested returns 3. So the union is 1 | 3.

🔧 Debug

advanced

Identify the error in nested conditional type

What error does this code produce?

Typescript

type Nested<T> = T extends string ? (T extends number ? "Impossible" : "String") : "Not String";
type Result = Nested<42>;

A Type 'number' is not assignable to type 'string'.

B Type 'number' does not satisfy the constraint 'string'.

C "Impossible"

D "Not String"

💡 Hint

Check how the outer condition evaluates for number type.

The outer condition checks if T extends string. Since 42 is a number, it does not extend string, so the else branch "Not String" is returned. No error occurs.

❓ Predict Output

advanced

Complex nested conditional type with multiple branches

What is the type of Result here?

Typescript

type Nested<T> = T extends string ? (T extends "x" ? "X" : (T extends "y" ? "Y" : "Other String")) : (T extends number ? (T extends 1 ? "One" : "Other Number") : "Unknown");
type Result = Nested<"y" | 1>;

A "X" | "One"

B "Y" | "One"

C "Other String" | "Other Number"

D "Y" | "Other Number"

💡 Hint

Evaluate each union member separately through the nested conditions.

For "y", the nested condition returns "Y". For 1, the nested condition returns "One". So the union is "Y" | "One".

🧠 Conceptual

expert

Understanding distributive property of nested conditional types

Given the nested conditional type below, what is the type of Result?

Typescript

type Nested<T> = T extends string ? (T extends "a" ? "A" : "Not A") : (T extends number ? (T extends 2 ? "Two" : "Not Two") : "Other");
type Result = Nested<string | 2 | boolean>;

A "A" | "Not A" | "Two" | "Other"

B "A" | "Two" | "Other"

C "A" | "Not A" | "Not Two" | "Other"

D "A" | "Not A" | "Two" | "Not Two" | "Other"

💡 Hint

Remember conditional types distribute over unions and nested conditions apply per member.

The union string | 2 | boolean distributes. For string, it returns "A" if "a" else "Not A" (string includes all strings, so "a" is a subtype, but string itself is not "a", so both "A" and "Not A" appear). For 2, it returns "Two". For boolean, it returns "Other". Also, number includes 2, but 2 is a literal type, so "Two" is included. "Not Two" appears because number includes other numbers besides 2, but since only 2 is in the union, "Not Two" does not appear. However, since the union is string | 2 | boolean, the number part is only 2, so "Not Two" does not appear. But string includes all strings, so "Not A" appears for strings other than "a". So the correct union is "A" | "Not A" | "Two" | "Other".

Practice

1.

What does a nested conditional type in TypeScript allow you to do?

Example: type Example<T> = T extends string ? (T extends 'hello' ? number : boolean) : null;

easy

A. Write multiple unrelated types in one statement

B. Check multiple conditions inside one type to decide the result type

C. Create a function inside a type

D. Use loops inside type definitions

Solution

1. Step 1: Understand the conditional type structure

   The type checks if T extends string. If yes, it checks again if T extends 'hello'.

2. Step 2: Recognize nested conditions

   This shows a condition inside another condition, allowing different results based on multiple checks.

3. Final Answer:

   Check multiple conditions inside one type to decide the result type -> Option B

4. Quick Check:

   Nested conditional types = multiple checks [OK]

Hint: Nested ? inside ? means multiple conditions [OK]

Common Mistakes:

• Thinking nested means unrelated types
• Confusing conditional types with functions
• Assuming loops work inside types

2.

Which of the following is the correct syntax for a nested conditional type in TypeScript?

type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number';

easy

A. type Result<T> = T extends number ? T extends 5 ? 'Five' : 'Other' : 'Not a number';

B. type Result<T> = if T extends number then if T extends 5 then 'Five' else 'Other' else 'Not a number';

C. type Result<T> = T extends number ? { if T extends 5 then 'Five' else 'Other' } : 'Not a number';

D. type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number';

Solution

1. Step 1: Check the syntax of nested conditional types

   Nested conditional types use the syntax condition ? (nested condition ? trueType : falseType) : elseType.

2. Step 2: Identify correct parentheses and keywords

   type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; correctly uses parentheses and the ternary ? and : operators. Options A, B, and D have syntax errors or invalid keywords.

3. Final Answer:

   type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; -> Option D

4. Quick Check:

   Correct nested syntax = type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; [OK]

Hint: Use parentheses around nested ? : parts [OK]

Common Mistakes:

• Omitting parentheses around nested condition
• Using if/then syntax inside types
• Using braces {} instead of parentheses

3.

What is the resulting type of CheckType<"hello"> given this code?

type CheckType<T> = T extends string ? (T extends "hello" ? number : boolean) : null;

medium

A. boolean

B. string

C. number

D. null

Solution

1. Step 1: Evaluate outer condition

   T is "hello", which extends string, so the outer condition is true.

2. Step 2: Evaluate inner condition

   Now check if T extends "hello". It does, so the inner condition returns number.

3. Final Answer:

   number -> Option C

4. Quick Check:

   "hello" extends "hello" = number [OK]

Hint: Check outer then inner condition stepwise [OK]

Common Mistakes:

• Ignoring inner condition and picking boolean
• Choosing null because of outer else
• Confusing string literal with string type

4.

Identify the error in this nested conditional type:

type Test<T> = T extends number ? T extends 10 ? 'Ten' : 'Other' : 'Not a number'

medium

A. Missing parentheses around the nested conditional

B. Using wrong keywords instead of extends

C. Missing semicolon at the end

D. Incorrect use of quotes around string literals

Solution

1. Step 1: Check nested conditional syntax

   The nested conditional T extends 10 ? 'Ten' : 'Other' must be wrapped in parentheses to group it properly.

2. Step 2: Identify missing parentheses impact

   Without parentheses, TypeScript cannot parse the nested condition correctly, causing a syntax error.

3. Final Answer:

   Missing parentheses around the nested conditional -> Option A

4. Quick Check:

   Nested condition needs parentheses [OK]

Hint: Always wrap nested ? : in parentheses [OK]

Common Mistakes:

• Forgetting parentheses causes syntax errors
• Thinking semicolon is required inside type
• Misusing extends keyword

5.

Given this nested conditional type, what is the type of Result<string | number>?

type Result<T> = T extends string ? (T extends 'a' ? 1 : 2) : (T extends number ? 3 : 4);

hard

A. 1 | 2 | 3

B. 1 | 2 | 3 | 4

C. 2 | 3

D. never

Solution

1. Step 1: Distribute conditional over union types

   For T = string | number, TypeScript applies the conditional to each union member separately.

2. Step 2: Evaluate each branch

   For string: if 'a' then 1 else 2. For number: 3. So combined type is 1 | 2 | 3.

3. Final Answer:

   1 | 2 | 3 -> Option A

4. Quick Check:

   Union splits nested condition = 1|2|3 [OK]

Hint: Conditional types distribute over unions [OK]

Common Mistakes:

• Including 4 which is for non-string/number
• Not splitting union types correctly
• Assuming single output type for union