Nested conditional types in Typescript - Step-by-Step Execution

Concept Flow - Nested conditional types

Start with Type T

↓

Check Condition 1: T extends X?

↓

Check Condition 2: T extends Y?

↓

Return Type A

The type checks T against conditions step-by-step, returning different types based on nested checks.

Execution Sample

Typescript

type Nested<T> =
  T extends string ?
    T extends "hello" ? "Greeting" : "String" :
    "Other";

// Example: Nested<'hello'>

This type checks if T is a string, then if it is 'hello', returning different string literals accordingly.

Execution Table

Step	Type T	Condition	Result	Returned Type
1	"hello"	T extends string?	true	Check next condition
2	"hello"	T extends "hello"?	true	"Greeting"
3	"world"	T extends string?	true	Check next condition
4	"world"	T extends "hello"?	false	"String"
5	42	T extends string?	false	"Other"

💡 Execution stops after returning the matching type based on conditions.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
T	generic	"hello"	"hello"	"world"	"world"	42
Condition 1 (T extends string)	unknown	true	true	true	true	false
Condition 2 (T extends "hello")	unknown	true	true	false	false	n/a
Returned Type	none	check next	"Greeting"	check next	"String"	"Other"

Key Moments - 3 Insights

Why does the type check T extends string first before checking T extends "hello"?

Because the nested conditional only runs the inner check if the outer condition is true, as shown in execution_table rows 1 and 3.

What happens if T does not extend string at all?

The type immediately returns "Other" without checking the nested condition, as seen in row 5.

Why is "Greeting" returned for T = "hello" but "String" for T = "world"?

Because "hello" matches the nested condition exactly (row 2), while "world" fails it and returns the else branch (row 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the returned type at step 4 when T is "world"?

A "Greeting"

B "String"

C "Other"

D Check next condition

💡 Hint

Check the 'Returned Type' column in row 4 of execution_table.

At which step does the condition T extends string become false?

A Step 5

B Step 3

C Step 1

D Step 2

💡 Hint

Look at the 'Condition' and 'Result' columns in execution_table row 5.

If T is changed to "hello", which returned type will appear according to variable_tracker?

A "Other"

B "String"

C "Greeting"

D Check next condition

💡 Hint

See the 'Returned Type' row in variable_tracker after step 2.

Concept Snapshot

Nested conditional types syntax:
type Result<T> = T extends X ? (T extends Y ? A : B) : C;

Checks conditions inside conditions.
Returns type A if T matches Y inside X.
Returns B if T matches X but not Y.
Returns C if T does not match X.

Full Transcript

This visual trace shows how nested conditional types in TypeScript work step-by-step. We start with a generic type T. First, we check if T extends string. If yes, we check if T extends the literal "hello". If that is true, the type returns "Greeting". If not, it returns "String". If T does not extend string, it returns "Other". The execution table shows these checks for different T values: "hello", "world", and 42. The variable tracker records the state of T, conditions, and returned types after each step. Key moments clarify why the outer condition is checked first and what happens when conditions fail. The quiz questions help reinforce understanding by asking about returned types at specific steps. This helps beginners see how nested conditional types decide which type to return based on layered checks.

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