Conditional type with generics in Typescript - Step-by-Step Execution

Concept Flow - Conditional type with generics

Start with generic type T

↓

Check condition: T extends string?

↓

Type is string

↓

Return string

This flow shows how a generic type T is checked against a condition, returning different types based on whether T extends string or not.

Execution Sample

Typescript

type Example<T> = T extends string ? "yes" : "no";

let a: Example<string>;
let b: Example<number>;

Defines a conditional type Example that returns "yes" if T is string, otherwise "no". Then assigns types to variables a and b.

Execution Table

Step	Generic T	Condition (T extends string?)	Result Type	Variable	Assigned Type
1	string	true	"yes"	a	"yes"
2	number	false	"no"	b	"no"
3	-	-	-	-	Execution ends after assignments

💡 All generic checks done, variables assigned their conditional types.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
a	unassigned	"yes"	"yes"	"yes"
b	unassigned	unassigned	"no"	"no"

Key Moments - 2 Insights

Why does variable 'a' get type "yes" but 'b' get "no"?

Because in the execution_table at Step 1, T is string so condition is true, returning "yes" for 'a'. At Step 2, T is number, condition false, so returns "no" for 'b'.

What does 'T extends string' mean in this context?

It checks if the generic type T is assignable to string. If yes, the conditional type returns the first type; otherwise, the second.

Visual Quiz - 3 Questions

Look at the execution_table, what is the assigned type of variable 'b' at Step 2?

A "no"

B "yes"

C number

D string

💡 Hint

Check the 'Assigned Type' column for variable 'b' at Step 2 in the execution_table.

At which step does the condition 'T extends string?' evaluate to true?

A Step 3

B Step 1

C Step 2

D Never

💡 Hint

Look at the 'Condition' column in the execution_table to see when it is true.

If we change 'Example<T>' to return number when T extends string, what would be the assigned type of 'a'?

A "yes"

B "no"

C number

D string

💡 Hint

Think about the conditional type logic and how it returns types based on the condition.

Concept Snapshot

Conditional types with generics use syntax: type X<T> = T extends U ? A : B;
It checks if T fits U, then returns A if true, else B.
Useful to create flexible types based on input.
Example: type Example<T> = T extends string ? "yes" : "no";
Assigns different types depending on T.

Full Transcript

This visual execution shows how conditional types with generics work in TypeScript. We start with a generic type T. The condition checks if T extends string. If true, the type resolves to "yes"; if false, to "no". We see this in the example where variable 'a' with T as string gets type "yes", and 'b' with T as number gets "no". The execution table tracks each step, condition result, and assigned type. The variable tracker shows how 'a' and 'b' change from unassigned to their final types. Key moments clarify why the condition affects the type and what 'extends' means here. The quiz tests understanding of condition results and type assignments. This helps beginners see how conditional types adapt based on generic input.