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

Concept Flow - Distributive conditional types

Start with type T

↓

Is T a union?

↓

Final type

Distributive conditional types check each member of a union type separately, then combine the results.

Execution Sample

Typescript

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

Checks each type in the union string | number; returns "yes" for string, "no" for number.

Execution Table

Step	Type T	Condition (T extends string?)	Result for T	Combined Result
1	string	string extends string? Yes	"yes"	"yes"
2	number	number extends string? No	"no"	"yes" | "no"
3	Final	-	-	"yes" | "no"

💡 All union members processed, combined results form final type.

Variable Tracker

Variable	Start	After 1	After 2	Final
T	string | number	string	number	-
Result for T	-	"yes"	"no"	"yes" | "no"

Key Moments - 2 Insights

Why does the conditional type apply separately to each member of the union?

Because distributive conditional types automatically split the union and apply the condition to each member, as shown in execution_table rows 1 and 2.

What happens if the type is not a union?

The condition applies directly without splitting, as shown in the 'No' branch in concept_flow.

Visual Quiz - 3 Questions

Look at the execution table, what is the result for the type 'number' at step 2?

A "yes"

B "no"

C "number"

D "string"

💡 Hint

Check the 'Result for T' column at step 2 in the execution_table.

At which step does the combined result become "yes" | "no"?

A Step 2

B Step 1

C Step 3

D Never

💡 Hint

Look at the 'Combined Result' column in the execution_table rows.

If T was just 'string' (not a union), what would the combined result be?

A "yes" | "no"

B "no"

C "yes"

D Error

💡 Hint

Refer to concept_flow 'No' branch and variable_tracker for single type behavior.

Concept Snapshot

Distributive conditional types split union types and apply conditions to each member.
Syntax: T extends U ? X : Y
If T is a union, condition applies to each member separately.
Results combine into a new union type.
If T is not a union, condition applies directly.
Useful for transforming union types based on conditions.

Full Transcript

Distributive conditional types in TypeScript work by checking if a type T is a union. If it is, TypeScript splits the union into each member and applies the conditional type to each member separately. For example, with type Example<T> = T extends string ? "yes" : "no"; and T = string | number, the condition applies to string first, returning "yes", then to number, returning "no". These results combine into the union "yes" | "no". If T is not a union, the condition applies directly without splitting. This behavior helps transform union types based on conditions. The execution table shows each step, the condition check, and the combined result. Beginners often wonder why the condition applies separately; it's because of this distributive behavior. Also, if the type is not a union, the condition applies once. Understanding this helps write powerful type transformations in TypeScript.