Typescript

How the TypeScript Exclude Type Works

In TypeScript, the Exclude utility type lets us exclude certain members from an already defined union type. That means we can take an existing type, and remove items from it for specific situations.

Let's look at how the exclude utility type works in TypeScript.

How the Exclude Type works in TypeScript

In TypeScript, we can define a specific type called a union type. A union type is a list of possible values for something. For example:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

Above, if we give something the type myUnionType, then it will only be able to be 4 values: 🍇, 🍎, 🫐, or 🍋. For example:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let myString:myUnionType = "🍇"

// This throws an error! "Type '"some-string"' is not assignable to type 'myUnionType'.
let secondString:myUnionType = "some-string"

So now we've covered the basics of how union types work, let's talk about Exclude.

The Exclude Type

Suppose we have a situation where we want to use myUnionType, but we don't want to include 🍋 in the valid list of values. This can happen in real life in an API response - suppose you have a standard API response type, but you want to remove a field in a particular situation from that API type.

That's where we can use Exclude. Exclude has the syntax Exclude<UnionType, ExcludedMembers>. We pass in our normal union type, and then say which members we want to remove from it in the second argument.

Let's try it:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let lemon:myUnionType = "🍋"

// This throws an error! Type '"🍋"' is not assignable to type '"🍇" | "🍎" | "🫐"'.
let noLemonsPlease:Exclude<myUnionType, "🍋"> = "🍋"

The second variable, noLemonsPlease throws an error, since we used Exclude to remove 🍋 from our union type for this specific variable. That means we can use the type as normal elsewhere, and then exclude members when we feel like it with Exclude.

If we want to remove more than one member, we just have to separate them with a |:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let lemon:myUnionType = "🍋"
 
let noLemonsPlease:Exclude<myUnionType, "🍋"> = "🍇"
//  ^
//  └ - - Type is  "🍇" | "🍎" | "🫐"

let noApplesOrLemons:Exclude<myUnionType, "🍋" | "🍎"> = "🍇";
//  ^
//  └ - - Type is  "🍇" | "🫐"

let onlyRaspberries:Exclude<myUnionType, "🍋" | "🍎" | "🫐"> = "🍇";
//  ^
//  └ - - Type is  "🍇"

let backToLemons:myUnionType = "🍋"
//  ^
//  └ - - Type is  "🍇" | "🍎" | "🫐" | "🍋"

The Exclude type therefore gives us flexibility to remove specific elements when it suits us, and keep them there when we need them again.

More Tips and Tricks for Typescript

• TypeScript Optional Parameters
• How TypeScript Default Parameters Work
• How TypeScript Conditional Types Work
• Ultimate Guide to Types in Typescript
• How the TypeScript NonNullable Type Works
• How keyof works in Typescript
• How the TypeScript Extract Type Works
• How the TypeScript Omit Type works
• How the typeof Operator works in TypeScript
• The Difference between TypeScript Interfaces and Types