Why Exclude type in Typescript? - Purpose & Use Cases

The Big Idea

What if you could instantly remove unwanted types without any mistakes or extra work?

The Scenario

Imagine you have a list of different fruit types, but you want to create a new list that excludes one specific fruit, like "banana". Doing this manually means checking each fruit one by one and removing the unwanted ones.

The Problem

This manual way is slow and easy to mess up, especially if the list is long or changes often. You might forget to remove some, or accidentally remove the wrong ones. It's like trying to pick out one color of jellybean from a huge jar by hand.

The Solution

The Exclude type in TypeScript lets you automatically create a new type that leaves out certain unwanted types. It's like having a magic filter that removes the exact things you don't want, without any mistakes or extra work.

Before vs After

✗ Before

type Fruit = 'apple' | 'banana' | 'orange';
type WithoutBanana = 'apple' | 'orange'; // manually written

✓ After

type Fruit = 'apple' | 'banana' | 'orange';
type WithoutBanana = Exclude<Fruit, 'banana'>;

What It Enables

This lets you easily create precise types by removing unwanted parts, making your code safer and easier to maintain.

Real Life Example

For example, if you have a user role system with roles like 'admin', 'editor', and 'viewer', but want to create a type for all roles except 'admin', Exclude does this perfectly without errors.

Key Takeaways

Manually removing types is slow and error-prone.

Exclude type automatically filters out unwanted types.

This makes your TypeScript code cleaner and safer.

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