Exclude type in Typescript - Step-by-Step Execution

Concept Flow - Exclude type

Start with Union Type

↓

Apply Exclude<Type, ExcludedMembers>

↓

Remove ExcludedMembers from Type

↓

Resulting Type without ExcludedMembers

↓

Use Resulting Type

Exclude type removes specified members from a union type, leaving only the remaining members.

Execution Sample

Typescript

type Fruit = "apple" | "banana" | "orange";
type Citrus = "orange";
type NonCitrus = Exclude<Fruit, Citrus>;

const fruit1: NonCitrus = "apple";
const fruit2: NonCitrus = "banana";

This code removes "orange" from Fruit type, so NonCitrus can only be "apple" or "banana".

Execution Table

Step	Type Expression	Evaluation	Resulting Type
1	Fruit	"apple" | "banana" | "orange"	"apple" | "banana" | "orange"
2	Citrus	"orange"	"orange"
3	Exclude<Fruit, Citrus>	Remove "orange" from Fruit	"apple" | "banana"
4	Assign fruit1: NonCitrus = "apple"	Check if "apple" in NonCitrus	Valid
5	Assign fruit2: NonCitrus = "banana"	Check if "banana" in NonCitrus	Valid
6	Assign fruit3: NonCitrus = "orange"	Check if "orange" in NonCitrus	Error: "orange" excluded

💡 Exclude removes "orange" from Fruit, so only "apple" and "banana" are allowed.

Variable Tracker

Variable	Start	After Exclude	Final
Fruit	"apple" | "banana" | "orange"	"apple" | "banana" | "orange"	"apple" | "banana" | "orange"
Citrus	"orange"	"orange"	"orange"
NonCitrus	undefined	undefined	"apple" | "banana"

Key Moments - 2 Insights

Why can't we assign "orange" to a variable of type NonCitrus?

Because NonCitrus is created by excluding "orange" from Fruit, so "orange" is not part of NonCitrus (see execution_table step 6).

Does Exclude change the original Fruit type?

No, Exclude creates a new type without the excluded members, but Fruit remains unchanged (see variable_tracker for Fruit).

Visual Quiz - 3 Questions

Look at the execution_table step 3, what is the resulting type after Exclude<Fruit, Citrus>?

A "apple" | "banana" | "orange"

B "apple" | "banana"

C "orange"

D "banana" | "orange"

💡 Hint

Check the Resulting Type column at step 3 in execution_table.

At which step does assigning "orange" to NonCitrus cause an error?

A Step 6

B Step 5

C Step 4

D No error

💡 Hint

Look for the step where "orange" assignment is checked in execution_table.

If we change Citrus to "banana", what would NonCitrus include?

A "banana" | "orange"

B "apple" | "banana"

C "apple" | "orange"

D "orange"

💡 Hint

Exclude removes Citrus from Fruit; changing Citrus changes what is excluded (see concept_flow).

Concept Snapshot

Exclude<Type, ExcludedMembers>
- Removes ExcludedMembers from Type
- Works on union types
- Result is a new type without excluded parts
- Useful to filter types easily
- Example: Exclude<'a'|'b'|'c', 'c'> = 'a'|'b'

Full Transcript

The Exclude type in TypeScript takes two types: a union type and a subset to exclude. It returns a new type without the excluded members. For example, if Fruit is "apple" | "banana" | "orange" and Citrus is "orange", then Exclude<Fruit, Citrus> results in "apple" | "banana". Assigning "orange" to this new type causes an error because it was excluded. The original Fruit type remains unchanged. This helps to create types by removing unwanted parts from unions.