Conditional type syntax in Typescript - Step-by-Step Execution

Concept Flow - Conditional type syntax

Start with Type T

↓

Check Condition: T extends U?

Yes No↓

Use Type X

↓

Result Type

The conditional type checks if type T fits type U. If yes, it uses type X; if no, it uses type Y.

Execution Sample

Typescript

type IsString<T> = T extends string ? "Yes" : "No";
type Test1 = IsString<string>;
type Test2 = IsString<number>;

Defines a conditional type that returns "Yes" if T is string, otherwise "No".

Execution Table

Step	Type T	Condition (T extends string?)	Result Type
1	string	Yes	"Yes"
2	number	No	"No"

💡 All types tested, conditional type resolved to final result types.

Variable Tracker

Variable	Start	After 1	After 2	Final
T	generic	string	number	number
Result Type	unknown	"Yes"	"No"	"No"

Key Moments - 2 Insights

Why does Test1 become "Yes" but Test2 becomes "No"?

Because in execution_table row 1, T is string which matches the condition, so it returns "Yes"; in row 2, T is number which does not match, so it returns "No".

Is the condition checked at runtime or compile time?

The condition is checked at compile time by TypeScript's type system, not at runtime, as shown by the static evaluation in execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result type when T is string?

A "No"

B "Yes"

C string

D number

💡 Hint

Check execution_table row 1 under Result Type column.

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

A Step 1

B No step, always true

C Step 2

D Both steps

💡 Hint

Look at execution_table Condition column for Step 2.

If we change the condition to T extends number, what would Test1 result be?

A "No"

B string

C "Yes"

D number

💡 Hint

Refer to how condition affects result in execution_table and variable_tracker.

Concept Snapshot

Conditional types syntax:
type Result = T extends U ? X : Y;
Checks if T fits U.
If yes, Result is X.
If no, Result is Y.
Used for type decisions at compile time.

Full Transcript

This visual trace shows how TypeScript conditional types work. We start with a generic type T. The condition checks if T extends another type U, here string. If true, it returns one type, else another. We see examples with T as string and number. The condition is evaluated at compile time, not runtime. The result type changes accordingly. This helps create flexible types based on conditions.

Practice

1. What does a conditional type in TypeScript do?
T extends U ? X : Y

easy

A. Checks if T equals U and returns a boolean

B. Chooses type X if T is assignable to U, otherwise type Y

C. Creates a new type by combining T and U

D. Defines a function that returns X or Y

Solution

1. Step 1: Understand the conditional type syntax

   The syntax T extends U ? X : Y means if type T can be assigned to type U, then use type X.

2. Step 2: Interpret the meaning

   If T is not assignable to U, then the type becomes Y instead.

3. Final Answer:

   Chooses type X if T is assignable to U, otherwise type Y -> Option B

4. Quick Check:

   Conditional type picks between X and Y based on T extends U [OK]

Hint: Remember: condition ? trueType : falseType [OK]

Common Mistakes:

• Thinking it returns a boolean value
• Confusing extends with equality check
• Assuming it creates a function

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

easy

A. type Result = T extends U then X else Y;

B. type Result = if (T extends U) X else Y;

C. type Result = T extends U ? X : Y;

D. type Result = T ? U : X : Y;

Solution

1. Step 1: Recall the correct conditional type syntax

   TypeScript uses type Result = T extends U ? X : Y; to define conditional types.

2. Step 2: Identify incorrect options

   Options A, B, and C use invalid syntax not supported by TypeScript.

3. Final Answer:

   type Result = T extends U ? X : Y; -> Option C

4. Quick Check:

   Correct conditional type syntax uses ? and : [OK]

Hint: Look for ? and : after extends keyword [OK]

Common Mistakes:

• Using if-else keywords inside type definitions
• Misplacing question mark or colon
• Writing 'then' instead of '?'

3. What is the resulting type of this code?

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

medium

A. number

B. boolean

C. string

D. 'hello'

Solution

1. Step 1: Analyze the conditional type Check<T>

   If T extends string, then the type is number; otherwise boolean.

2. Step 2: Substitute T with 'hello'

   'hello' is a string literal, so it extends string, making the type number.

3. Final Answer:

   number -> Option A

4. Quick Check:

   'hello' extends string -> number [OK]

Hint: Check if type matches condition, then pick true branch [OK]

Common Mistakes:

• Confusing the output type with input type
• Assuming literal types don't extend their base types
• Choosing boolean instead of number

4. Identify the error in this conditional type:

type Example<T> = T extends number ? 'num' : 'not num'

medium

A. Conditional types cannot return string literals

B. Incorrect use of extends keyword

C. Missing semicolon after type definition

D. No error, syntax is correct

Solution

1. Step 1: Review the conditional type syntax

   The syntax type Example<T> = T extends number ? 'num' : 'not num' is valid in TypeScript.

2. Step 2: Check for syntax errors

   Semicolon after type alias is optional; string literals are valid return types.

3. Final Answer:

   No error, syntax is correct -> Option D

4. Quick Check:

   Conditional types can return string literals [OK]

Hint: Conditional types allow any valid type as result [OK]

Common Mistakes:

• Expecting semicolon is mandatory
• Thinking extends is only for classes
• Believing string literals can't be types

5. Given this conditional type:

type Flatten<T> = T extends any[] ? T[number] : T;

What is the type of Flatten<string[] | number>?

hard

A. string | number

B. string[] | number

C. string

D. number

Solution

1. Step 1: Understand the conditional type Flatten<T>

   If T is an array type, it returns the element type (T[number]), else returns T itself.

2. Step 2: Apply Flatten to union type string[] | number

   Conditional types distribute over unions, so Flatten<string[] | number> = Flatten<string[]> | Flatten<number> = string | number.

3. Final Answer:

   string | number -> Option A

4. Quick Check:

   Conditional types distribute over unions [OK]

Hint: Remember conditional types distribute over union types [OK]

Common Mistakes:

• Not distributing over union types
• Returning array type instead of element type
• Confusing T[number] with T