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.

Practice

1. What does the TypeScript Exclude utility type do?

easy

A. Converts a type to a string

B. Adds new types to a union type

C. Removes specific types from a union type

D. Creates a readonly version of a type

Solution

1. Step 1: Understand the purpose of Exclude

   Exclude is designed to remove certain types from a union type.

2. Step 2: Compare with other utility types

   Unlike adding or converting types, Exclude specifically filters out unwanted types.

3. Final Answer:

   Removes specific types from a union type -> Option C

4. Quick Check:

   Exclude = Remove types [OK]

Hint: Exclude filters out unwanted types from unions [OK]

Common Mistakes:

• Thinking it adds types instead of removing
• Confusing with Partial or Readonly utility types
• Assuming it converts types to strings

2. Which of the following is the correct syntax to exclude type 'b' from the union 'a' | 'b' | 'c'?

easy

A. type Result = Exclude<'a' | 'b' | 'c', ['b']>;

B. type Result = Exclude<'a' | 'b' | 'c', 'b'>;

C. type Result = Exclude<'a' | 'b' | 'c'>;

D. type Result = Exclude<'a' | 'b' | 'c', 'd'>;

Solution

1. Step 1: Check the syntax of Exclude

   The correct syntax is Exclude<UnionType, ExcludedType>.

2. Step 2: Match the correct exclusion

   type Result = Exclude<'a' | 'b' | 'c', 'b'>; correctly excludes 'b' from the union 'a' | 'b' | 'c'.

3. Final Answer:

   type Result = Exclude<'a' | 'b' | 'c', 'b'>; -> Option B

4. Quick Check:

   Exclude syntax = Exclude<Union, TypeToRemove> [OK]

Hint: Use Exclude syntax [OK]

Common Mistakes:

• Using array syntax for second parameter
• Omitting the second parameter
• Excluding a type not in the union

3. What is the resulting type of this code?

type Letters = 'x' | 'y' | 'z';
type Result = Exclude;

medium

A. 'x'

B. 'x' | 'y' | 'z'

C. 'y' | 'z'

D. never

Solution

1. Step 1: Identify the original union type

   Letters is 'x' | 'y' | 'z'.

2. Step 2: Apply Exclude to remove 'y' and 'z'

   Removing 'y' and 'z' leaves only 'x'.

3. Final Answer:

   'x' -> Option A

4. Quick Check:

   Exclude removes 'y' and 'z', leaving 'x' [OK]

Hint: Exclude removes all listed types from the union [OK]

Common Mistakes:

• Thinking it keeps excluded types
• Confusing with intersection types
• Assuming result is never when some types remain

4. Identify the error in this TypeScript code:

type Colors = 'red' | 'green' | 'blue';
type NoGreen = Exclude<Colors>;

medium

A. Missing second parameter in Exclude

B. Colors is not a union type

C. Exclude cannot be used with string literals

D. No error, code is correct

Solution

1. Step 1: Check the Exclude syntax

   Exclude requires two parameters: the union type and the type(s) to exclude.

2. Step 2: Identify the missing parameter

   The code only provides one parameter, missing the second one to exclude.

3. Final Answer:

   Missing second parameter in Exclude -> Option A

4. Quick Check:

   Exclude needs two types: Union and Excluded [OK]

Hint: Exclude always needs two type parameters [OK]

Common Mistakes:

• Forgetting the second parameter
• Assuming Exclude works with one argument
• Confusing Exclude with other utility types

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

type Status = 'success' | 'error' | 'pending' | 'cancelled';
type Filtered = Exclude;

hard

A. 'error' | 'cancelled' | 'unknown'

B. 'success' | 'pending' | 'unknown'

C. never

D. 'success' | 'pending'

Solution

1. Step 1: Identify the original union and excluded types

   Status is 'success' | 'error' | 'pending' | 'cancelled'. We exclude 'error', 'cancelled', and 'unknown'.

2. Step 2: Remove excluded types from the union

   'error' and 'cancelled' are removed. 'unknown' is not in Status, so it has no effect.

3. Final Answer:

   'success' | 'pending' -> Option D

4. Quick Check:

   Exclude removes only matching types from union [OK]

Hint: Exclude only removes types present in the union [OK]

Common Mistakes:

• Including excluded types in the result
• Adding excluded types not in the union
• Assuming result is never if unknown type excluded