TypeScript: Custom Type Guards
Did TypeScript ever annoy you with the error
Object is possibly undefined even if you filter out all the
undefined values, if yes then this post is for you.
Let’s quickly set up a very basic example to see how we can get to such a situation.
In the above example, we have an array of
Items and list of
itemIds , and we are trying to get the metadata of the
itemId . When you run this code and hover over
items , TypeScript will tell you that the variable
items is of type
(Item | undefined) which makes sense as some
id’s won’t match and return undefined so far so good, now the undefined items in the array are of no use to us and we don’t want to deal with the undefined errors when further referring the
items variable in our codebase, so let's quickly fix this by filtering out all the undefined values.
Great, now we can easily loop over the items array and process it without having to deal with undefined values, let’s quickly try it.
Wait but why? we already handled this above, let’s hover over
items and see its type
The problem is that the
.filter method will always return an array of the type with which you initially started so in our case it was
Item | undefined which makes sense now but how do we fix this 🤔
Type Guards to the Rescue
This is where TypeScript custom type guards come to the rescue, a custom type guard is basically a function that’s return type is a type predicate. It’s a very simple and intuitive approach for fixing the above problem properly, let’s see it in action.
And that’s how you can filter out the undefined values properly in TypeScript with type guards and keeping the types intact in your codebase. This same approach can be extended to a use-case where you are dealing with a Union type and you want to make sure you are accessing the right properties of the instance of that type.
I hope this post helps you in your journey with TypeScript. As always do share your thoughts on this approach in the comments below and feel free to connect with me on Twitter.