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.

Practice

1. What does a conditional type with generics in TypeScript do?

easy

A. It creates a new variable with a fixed type.

B. It selects one type or another based on a condition using generic types.

C. It runs a function only if a condition is true.

D. It converts all types to strings.

Solution

1. Step 1: Understand conditional types

   Conditional types choose between two types depending on a condition.

2. Step 2: Understand generics

   Generics allow types to be flexible and work with many types.

3. Final Answer:

   It selects one type or another based on a condition using generic types. -> Option B

4. Quick Check:

   Conditional type with generics = Selects type based on condition [OK]

Hint: Remember: conditional types pick types, generics make them flexible [OK]

Common Mistakes:

• Thinking conditional types run code instead of selecting types
• Confusing generics with fixed types
• Assuming conditional types convert values

2. Which of the following is the correct syntax for a conditional type with generics in TypeScript?

easy

A. type Result<T> = T extends string ? number : boolean;

B. function Result<T> = T ? number : boolean;

C. let Result<T> = T extends string ? number : boolean;

D. class Result<T> = T extends string ? number : boolean;

Solution

1. Step 1: Identify correct conditional type syntax

   Conditional types use the syntax: type Name<T> = T extends Condition ? TrueType : FalseType;

2. Step 2: Check each option

   type Result<T> = T extends string ? number : boolean; matches the correct syntax. Others use function, let, or class incorrectly.

3. Final Answer:

   type Result<T> = T extends string ? number : boolean; -> Option A

4. Quick Check:

   Correct conditional type syntax = type Result<T> = T extends string ? number : boolean; [OK]

Hint: Conditional types use 'type' keyword with generic and '? :' [OK]

Common Mistakes:

• Using function or class instead of type
• Missing the 'extends' keyword
• Using let instead of type

3. What is the type of Result<string> given this code?

type Result<T> = T extends number ? boolean : string;

medium

A. boolean

B. never

C. number

D. string

Solution

1. Step 1: Check the condition for T = string

   The condition is T extends number. Since string does not extend number, the condition is false.

2. Step 2: Determine the resulting type

   Because the condition is false, the type after the colon is chosen, which is string.

3. Final Answer:

   string -> Option D

4. Quick Check:

   string extends number? No, so type = string [OK]

Hint: Check if generic type matches condition; else pick false type [OK]

Common Mistakes:

• Assuming string extends number
• Choosing the true type instead of false
• Confusing extends with assignment

4. Identify the error in this conditional type with generics:

type Check<T> = T extends ? string : number;

medium

A. Incorrect use of generic parameter

B. Missing colon ':' after condition

C. Missing type after 'extends' keyword

D. Using 'type' instead of 'interface'

Solution

1. Step 1: Analyze the conditional type syntax

   The syntax requires a type after 'extends' to check the condition.

2. Step 2: Identify the missing part

   Here, 'T extends ?' is missing the type to compare with, causing a syntax error.

3. Final Answer:

   Missing type after 'extends' keyword -> Option C

4. Quick Check:

   Conditional type needs a type after 'extends' [OK]

Hint: Always put a type after 'extends' in conditional types [OK]

Common Mistakes:

• Leaving out the type after 'extends'
• Confusing '?' placement
• Using interface instead of type for conditional types

5. Given this code, what is the type of Output?

type IsArray<T> = T extends any[] ? 'array' : 'not array';
type Output = IsArray<string[] | number>;

hard

A. 'array' | 'not array'

B. 'array'

C. 'not array'

D. string[] | number

Solution

1. Step 1: Understand conditional type with union

   When conditional types receive a union, they distribute over each member separately.

2. Step 2: Apply condition to each union member

   string[] extends any[]? Yes, so 'array'. number extends any[]? No, so 'not array'.

3. Step 3: Combine results

   The result is the union of both: 'array' | 'not array'.

4. Final Answer:

   'array' | 'not array' -> Option A

5. Quick Check:

   Conditional distributes over union = 'array' | 'not array' [OK]

Hint: Conditional types distribute over unions automatically [OK]

Common Mistakes:

• Assuming single result for union input
• Forgetting distribution over union types
• Confusing output with input types