What is a Type Guard. TypeScript

TypeScript Narrowing #1

See this and many other articles at lucaspaganini.com

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:

What is narrowing in TypeScript?

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

Broad → Specific
string → "abc"
number → 123
object → Date

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.

Why 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.

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.

What 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.

// 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.

Conclusion

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.

References

1. TypeScript docs on narrowing