What is a Type Guard. TypeScript Narrowing #1

TypeScript Narrowing #1

Gooooood morning/night/afternoon/whatever time it is right now.

And welcome. Welcome to the first article in our TypeScript narrowing series.

We have SO MUCH to cover! Going from the fundamentals, all the way up to advanced use cases.

In this series, we will cover:

  1. What is a type guard
  2. What is narrowing
  3. What problems does it solve
  4. Type guard operators
  5. Equality narrowing
  6. Truthiness narrowing
  7. Control flow analysis
  8. Type predicates
  9. Custom type guards
  10. Creating guards by exclusion
  11. Discriminated unions
  12. Assertion guards
  13. Higher-order guards
  14. Narrowing library

At this point, you probably don't even know what I'm talking about. And that's fine, you will get there. But first, subscribe to the newsletter to make sure you don't miss any future articles.

I'm Lucas Paganini, and on this website, we release web development tutorials. If that's something you're interested in, please subscribe to the newsletter.

Let's start with the concepts:

LinkWhat is narrowing in TypeScript?

Narrowing is the process of refining a broader type to one that is more specific.

Broad → Specific string"abc" number123 objectDate

For example, refining string to "abc", or number to 123, so on... You have a broader type, and you shrink it to something more specific.

LinkWhy do we need narrowing?

And why would do that? Well, to handle the cases individually.

If you have a variable that can be a string, a number, or a boolean. Then you probably want to handle those cases one by one.

If it's a string, do this. If it's a number, do that. And if it's a boolean, do this other thing. That is narrowing.

TypeScript
const doSomething = (value: string | number | boolean) => {
  // If it's a string, do this
  // If it's a number, do that
  // If it's a boolean, do this other thing
};

You have a broader type, which is the combination of string, number, and boolean. Then you narrow this broader type to just a string, then to a number, and then to a boolean.

To narrow the types, you can use type guards.

LinkWhat is a type guard?

Type guards are narrowing techniques, they allow you to do narrowing.

"Lucas, let's be practical. How do they look like? Show me a type guard."

Ok, I'll show you. Just bear with me for a minute. I want to emphasize two things:

  1. TypeScript is a superset of JavaScript. All JavaScript is valid TypeScript;
  2. TypeScript wants to be as little intrusive as possible. Instead of forcing us into a new syntax, it will support idiomatic JavaScript ways of doing things. When possible!

See, narrowing is not a new issue, we've had to deal with it in JavaScript for years now. I bet that you were thinking of the typeof operator, while I was giving the last example.

The typeof operator allows us to narrow our types. So, it is a type guard.

TypeScript
// If it's a string, do this
if (typeof value === 'string') { ... }

There are many other type guards, and you can also create your own. We also have assertion guards, which is another way of doing narrowing.

LinkConclusion

For this first article, I'll leave it at that. References are below.

You now know the concepts of narrowing in TypeScript. But don't get used to it, in the next article, we'll get our hands dirty and practice those concepts.

I can't emphasize enough the amount of topics that we need to talk about. There is a lot to come.

And breaking that down to you in easy lessons, full of examples and animations, takes a lot of work. So I will play the role of the annoying content creator here, and kindly ask you to like and share this article. Share it with your colleagues. Share it in a Facebook group. Share it on Reddit. I don't know. But help us grow so that we keep making premium content like that for free.

We will soon release the second part of this article series, so subscribe to be notified when that happens.

If your company is looking for remote web developers, you can contact me and my team on lucaspaganini.com.

Have a great day, and I'll see you soon.

LinkReferences

  1. TypeScript docs on narrowing

Join our Newsletter and be the first to know when I launch a course, post a video or write an article.

This field is required
This field is required