Blog

TypeScript Type Guards

🗓 January 19, 2023⏱ 3 min read🔔 Last Updated: April 12, 2023Edit this Post Opens in new tab

In a recent project, I used TypeScript Type Guards so much that I wanted to write a blog post about them with great examples and why I like them. They've helped me prevent errors and make my code safer and more reliable.

Table of Contents

What are TypeScript Type Guards

TypeScript Type Guards are used when you only want to allow a specific type in a function, for example. The need for something like this derives from the fact that only this particular type has the values you can work with further.

If you'd use a function that's manipulating data in some sort on a type that would be missing these values, you will run into errors.

So TypeScript Type Guards are one of the first and best ways to ensure you only process further in your programming logic with relevant data.

How to write a great Type Guard

Let's learn more about Type Guards by looking at an example. To create one, you have to write a function whose return type is a type predicate. The predicate has the form: parameterName is Type.

Imagine you are getting some data from an API of your headless CMS. In your CMS, users can set the fields of a link element there. The link element would translate into a TypeScript Interface which would look like this:

interface FilledLink {
  url: string
  isExternal: boolean
  isTargetBlank: boolean
}

But they can also leave it empty and not add it in. This would look something like that:

interface EmptyLink {
  url: undefined
}

When we consume this data via API, we want to ensure we only work with it if it's a filled link and not null. So we only want to go further when it has the type of FilledLink.

Otherwise, if we didn't care and would render a link field in React, we would run into errors. We would access the URL field, which can be undefined, and our user interface would break.

So here's what a Type Guard for this scenario would look like:

const isFilledLink = (link: EmptyLink | FilledLink): link is FilledLink => {
  return link?.url !== undefined
}

Let's have a closer look on what happens here. We define a function who takes in a parameter of type EmptyLink | FilledLink. The return type is a type predicate, which is a function that returns a boolean. The boolean is used to determine if the type is FilledLink or not.

This ensures, that we can work on with the url field, because we know it's not undefined anymore.

This is called a custom Type Guard or a user-defined Type Guard. It's the most powerful because you can customize it all the way you want.

Built-in Type Guards

There are also built-in Type Guards in TypeScript. The following exist:

I've linked them all to the official TypeScript documentation, so you can read more about them there. I will write a detailled blog post about these soon, so stay tuned!

That's it about TypeScript Type Guards, in this case specifically about user-defined or custom Type Guards!

Blog

TypeScript Type Guards

What are TypeScript Type Guards

How to write a great Type Guard

Built-in Type Guards

Further reading