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".