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.