Type Predicates Solve This Common TypeScript Error

Key Takeaways

typescripts inference is incredible probably the best feature in all of typescript but when that inference doesn't work properly it can be incredibly disruptive and difficult to figure out what to do next and this code is the perfect example of when typescript inference fails and how you can actually fix that so in our code here we have a type of user which is just an ID and a name and then we have a type of employee which is the same thing as a user but they also have an email as you can see here we have an array of people which are either a user or an employee you can see we have two users and then we have two employees down here that have actual emails now inside of my code this is actually working and doing inference properly for now as you can see I'm looping through all of my people and right now each person is either a user or they are an employee and then I'm checking hey does this person object have the email field inside of it if the person does have an email field well then we know that they are an employee so we can access the email property and you can see when we hover over this the person object is actually specified as an employee which is why we have access to that email prop when we do our auto complete now in the else case if they don't have that email prop well it means that they are a user so if we hover here you can see that this person is correctly identified as a user so we only have access to name and ID and we don't actually have the email here now this is all working great but a lot of times when you write code like this this if check ends up getting extracted out into a function such as is employee and we pass it in a person so if we create that function real quick is employee this is going to take in a person which is either a user or an employee and we just want to determine hey does this person have the email property so we're going to return if the email is inside the person well we know that that is now an employee instead of a user so if I do this and save my code real quick you'll notice up here we actually have a problem and that's cuz when I hover over a person it now no longer knows that this is a user even though my code is exactly the same the functionality has not changed at all but typescript is no longer able to infer what this person is that's because typescript is not smart enough to look inside of this function to see what's happening it only can inferior code based on what's directly around it not smart enough to look in here and see that this is actually doing that type narrowing for you you instead need to help out typescript by telling it about this type narrowing and this is something called type predicates a type predicate is essentially when you take a function that returns a Boolean and that Boolean specifically is narrowing the type of your object for example we're narrowing this person object down to either a user or an employee so in our case whenever this function returns true we know the type of our person is an employee in those cases all you need to do is where you would normally specify a return type for your function instead you take the variable that you want to narrow the type of in our case person and we want to give it a type by saying that it is some specific type in our case we're saying that this is an employee now when I save you can see my person type here is properly changing to employee and here we can see that the person type is properly being changed to user and that's directly because of this type predicate which is what this called where we're saying that the person is an employee whenever this returns true and if it returns false then that means it's everything except for employee which in our case is just one single value obviously if it could be multiple things it would be all of those things except for the employee so if you ever run into that problem this is how you fix it but there's a few gotes you need to know about type predicates and the main one is that this is essentially the same thing as doing an as casting for example I could mistype this and accidentally say you know what the person is actually a user and now you notice I'm getting errors inside of my code everywhere because now person here is actually being specified as a user or employee and down here my person is actually being typed as never and that's just because user is essentially a subset of the employee if we had these as two very distinct types that weren't related to each other in any way for example instead of making this extend the actual user I changed it to something like this where instead of a name we have an email what I could do is remove the name from these two now these two types are entirely separate from one another and you can see by saying that this is a user when I hover over person you can see that this type is user and when I hover over person down here you can see the type is employee this is entirely incorrect my code is technically correct but typescript doesn't know that because I accidentally made an error down here in my typescript code so that's one thing to watch out for is that you make sure when you do a type predicate that you're 100% certain that this is actually the correct type because this essentially doesn't ask casting that overwrites whatever that type would actually be this is a really handy trick though if you want to take some of that logic especially complicated if checks and track them out into a function which is generally best practice when it comes to clean code now if you want to learn more about typescript including these Advanced features as well as all the more basic features of typescript that you haven't actually spent the time to learn which is causing you to struggle with typescript I'd highly recommend checking out my typescript simplified course it'll be linked down in the description for you it covers absolutely everything you need to know about typescript and it's less than 5 hours long so you can learn everything you need to know about typescript by the end of today again I'm going to link that in the description for you if you enjoyed this video thank you very much for watching and have a a day