Typescript

How the TypeScript Exclude Type Works

Sponsor

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.

Utility Types

Utility Types are types defined in TypeScript to solve particular problems. If you're new to defining custom types in TypeScript, read my guide on defining custom types here.

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.

Last Updated Friday, 8 April 2022
Johnny Simpson
Johnny Simpson

Subscribe for Daily Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email