TypeScript Fundamentals × Narrowing, Discriminating Unions, and Type Guards

And if you have a function that takes in either a sandwich or pizza,

then as you go, you might want to be using

When things are defined as types, it's not always clear cut whether this thing is a string, a number, or whatever. Sometimes it's multiple things.

and, it. Using many of these,

before

a sandwich, or just like how I wrote this function. You know? Is TypeScript wrong? No. You are wrong.

how is this possible? I feel like I've done everything in my power to say that this is a string,

written any code that makes you check that it is a toastable and then you have

moving in. Right. So type narrowing would be just as part of

It. It's it's amazing how, it. In so JSX or TSX or Svelte template code, all of that can be happy with the methods you're trying to use or pass down as things get more narrow. Yeah.

it. A variable that was a number or a string.

It it's like what? It's probably the most common error that you see in TypeScript script when you you're getting going with it. You're working it. You're you're feeling very comfortable TypeScript, and then all of a sudden you say,

But it's also possible that somebody is passing in a pizza in this case, and you haven't food Sort of the area that you hit type narrowing and creating type guards on set. Like, I don't think we've actually ever talked about this on,

Type narrowing is basically where you're saying, alright. I want to use a string method on this thing that doesn't exist in a number method or a method on a number type. So, therefore, I need to narrow the type down to be a string, so to say, so that we're not gonna get an error saying you cannot use 2 lowercase on property of number or whatever that ends up being.

And Yeah.

specific properties on one thing that don't exist on another thing. So let's say you had

It. The most common error that you do see associated with this is argument type of this or this or this or this is not assignable to parameter type of this. It. Type blank is not assignable to type blank. Yeah.

as part of that function, you would either check that it is a toastable food first before you go ahead and do the functions that are toasting Especially if it's, like, being extended. Yeah. See, b and o o p. It's not something that I do a whole lot of. I bet where that is handy is if you have a base type like food

So first off is going to be one of the easiest ways to type guard, something that you're going to see very commonly, and that's just checking the type of the thing in a conditional.

it. We could have, like, a t minus or food was last mentioned.

like, how many times the food

examples creep into the show. It's funny it's so funny that it would be like, a string. Right? If maybe you have, like, a, a union type that's either a string or a number. If you successfully wrap in an if statement, if this variable is type of string, then do this following thing, then that's going to fix that error because now you've added a an explicit check to make sure that the thing is a string before you try to use the string method. And I use this myself even in template code all over the place,

is equal to never the case. It's always something that you have done, And it's always a an issue with the the types that you're narrowing or attempting to narrow. So if you are getting some of these errors and you can't figure it out, And this is my, honestly, my first time seeing this as a strategy. I've just never had to reach for this, but I think this is really neat. I was looking into it, and I was like, why not just put a if statement inside the

Sandwiches were last mentioned x amount of days ago on the show because it always ends up going there. But I think they're examples. Definitely.

You'll frequently see this as, like, type of variable

So you could say function is a sandwich That's the only possible other type that's being passed in that would have an m p three property.

that accepts a type of food.

because that is not what your function does.

Yes. You can take the logic out

If any of the the type of the in the proper property check or the instance of, easy to use APIs and SDKs and, They offer a full sounds scarier than it is. What do you think about that? I was about to say that.

But I guess Or you would convert like Scott said, you would convert the number to a string so that you're dealing with apples and apples before you go ahead and go through the rest of the function. Yeah.

type guard.

and that will return a boolean.

And then from that you can just return unions, type guards, In JavaScript, so new date is an example. Or if you create your own you know, like, am I doing this wrong? Am I Their dev portal You might just go ahead and say toast the the bread, and it's gonna say, hey. Hold on. I see that you could toast

Again, remember, a type guard is just a function that returns whether something is a type or not using all the methods we just talked about.

inside your function? Right? That's what I usually do, and that's good enough.

And that

am specifically making this a type guard by saying in my case, the food argument that is passed to the function is sandwich,

But the return type is not a boolean. It's a return.

So you can specify this is type in the return position for methods and for methods in classes and interfaces.

When mixed with type narrowing,

Yeah. Tweet us at syntax of m if you know because I again, I'm not a big object oriented programmer, so it's definitely, As an instance of the one they created. I'm sorry. Can't speak.

not one of those areas I've touched Yeah. It's one of those things that I see in the docs here, and I say that's

tight. It's so funny to say. Okay. Yeah. It goes inside a constructor.

Correct.

Okay. Okay. That makes sense because it's if it's if it's being bound to that. Interesting.

This is came out of left field. It it did. Might he have a left field. What didn't come out of left field, Wes, is our 2 sponsors today, which is Sentry and Payments Hub. So Sentry is the perfect place to see all of your errors and exceptions and mark them as done. Attach them to releases. Attach some to GitHub issues

and you you run super and then super

the type of the tag target object would be narrowed to the specified type. So you're basically saying Inside of the constructor.

neat.

will run the it. Original constructor first before you go ahead and and finish your your constructor of the extended type. I wonder if it's it's handy in those use cases.

CSC Unions. So often a union is basically a list of types where it could be this or it could be this or it could be this. And often

And then I never run into that issue in my code. So maybe there'll be someday when I'm Actually writing object oriented programming where the perfect opportunity to use this is will come up, and I'll a variable.

I'll rejoice. But, Yeah. So far, I have not used it myself personally. I would love to see some real practical examples of it. Next one is this is kind of in the same area of type

And the last 1 we have here is just a custom type guards, and that is Not anything that we didn't just talk about,

With any types of classes or complex objects. Yeah. More in object oriented

a date, then you would know that you have access to the the date

one

Instead of stuffing your functions full of if statements,

instance of will also check up c s. The prototype chain.

to narrow the branch, so to say. Oh, that's that's a really good example. Actually, I was just like I was Writing examples of like custom

of as well for this type of thing where,

classes, but like like an array, it will tell you that it's an object, right? Like almost everything in JavaScript it. Pass your basic, what, strings, numbers, booleans, am I approaching this wrong? Unfortunately, a string, a number of boolean, a custom type interface. But in this case, you say,

but there is an idea in TypeScript.

Yeah. Definitely, TypeScript Boss.

the date is one that's built in, right? Anything that you need to use new on

instance

Variable is an instance of TypeScript is controlling my life too. I'm controlling TypeScript.

So if you were to say let's say you had,

is is much more, what's that from? Is that Simpsons? a property that you're looking for so you can use the property in object. Like, let's say you're trying to via the API. They do all kinds of stuff. And, like, This seems like But the only like the kind of like the weird thing or the interesting thing about that in TypeScript is the return type of a type guard.

object oriented programing and which ones aren't and like which one you have to specifically choose If you need to be following different, That doesn't work with TypeScript types. So you couldn't say those fields that are different from each other. Right? Like you say, okay. The example, The TypeScript docs is really good as well as network state. Your network can either be loading, it could be failed, or it could be a success.

or an error will be will be different. Right? And being able to check for those values Oh, that's a good one. Simpsons, I don't Do very many Simpsons jokes, but that one came out

like a best before date is is the example that I've used. Right? You were so good with these food metaphors.

Right.

Otherwise, TypeScript is gonna yell at you again. Yeah. TypeScript frequently likes to yell at you, and that is one of the things that, like, Kind of turns people off of TypeScript

Yeah, I found and I think I still find this, but especially When I started TypeScript, type narrowing. Oh, that Sounds complicated, Tied to using the dot notation is that if you're using classes, But if you pass in 2 things that were totally separate, then I'm going to catch you on that. Right? So you could do prop in. You can also just say, if object dot property. So if media dot m p 3, on those Can you narrow are just objects. So once you pass Those those sort of simple ones. There's a couple other ways you could check if something is a type. You could check if it has It might be. It's always cool. Yeah. I think that's it for me. Anything else to add here? No, I don't think so. Yeah. I think this is this nails it. Cool. Cool. Alright. Thanks for tuning in. Catch you on Wednesday.

states and the network state will share and that might not be what you want. So if you wanna actually check if the instances on the thing or not, you can use the in. Yeah. And you can also use stuff with your payment integration, like the way that I would like to put it. And TypeScript will yell at you if you try to Assume that the data or the type coming in is what you assume it is, Something that is extending it that's not always the case. And we're gonna talk a little bit about some strategies here. Yeah. Another example I have here that's coming from my upcoming course is that you've got a function that takes in a food, And that food could either be a type like they like a food is kind of the generic type. And then we extend the generic food type and we create a sandwich and we create a pizza. Right.

is important.

within those, Let's say you have 3 types, Maybe do I need to step back 1 step I

techniques that we talked about in this episode is, like, one of the key ways that you go from being like, where you're basically defining the type of this.

Sandwich or pizza. They both I have their own properties. Like a pizza would have toppings

But then they will not share things like a successful response

Inside of your function

occasionally, right, because it's yelling at you so much. But I do think being able to control types from type narrowing

3 different if it is a type of of those functions and just put them in their own functions.

passing in a value of food, and you have to check Peace. Peace.

but they Also, we'll share things like,

our listeners to yeah. Just to say, here's here's what's up. You know, here's here's what's going on. And, I think, payments have did a great job here. So, yeah, thank you for payments up for being a new sponsor. Yeah. Welcome. Alright. So let's get into

on the podcast before. So you could still hit that and react as well, so You definitely need that in your tool belt.

They have a really neat landing page that allows you just to quickly go through. They also have like a really they have like lots of products. And on the products page, it will tell you which ones are PCI compliant The idea behind it I saw was that some people were saying you shouldn't be putting that logic in your function a sandwich would have bread type, as an instance of,

gives you easy to use APIs and SDKs that allow developers to create Ecommerce websites develop in person point of sale applications They also have they've sent us over some stuff that I'm just really excited about having this sponsor on myself because this seems really, really neat. Their code samples and everything looks pretty slick.

TypeScript fundamentals. We've done a couple TypeScript fundamentals episode, it. And I was just going through all of the notes and and planning for my TypeScript course, and I was going through,

Yeah. And and give that landing page a check too, like you just mentioned, because

They did not properly account for that being undefined. Yeah. And and it should go to to say, you know, especially if you're new to TypeScript here. There are many times when it can feel like

Or, complex It's not a good idea to replicate that check 3 or 4 times. In my case, it's almost always a one liner. Who cares? Right. But, it's nice to stick it in a separate function, I guess. It seems like it's the classic in TypeScript. You got to check that you got the right type before you go ahead and use it. It. There is no assuming in TypeScript, I think, is the, You have merchants in there. You have to process their payments. They provide interested in programmatic merchant onboarding and access We're going to dive into explaining.

like it's making you. And it's not that TypeScript is is being,

core problems, I think, when you get into TypeScript is learning how to something that you probably hit more

Like, I I find it really helpful to talk to people who have have hit that possible issue. And the question is not how do I fix this is

Google Home the other day and just said undefined. And I was like, that's a case.

find and it. Just squish these types of issues in TypeScript because it is even though, like you said, it it is, you know, is yelling at you. It's at the end of the day, it is, you know, trying to save your butt. Or even it's looking now like,

Well, it is it is annoying, but it's it's doing it because, there's a possibility that you could goof this up, or There's a possibility that somebody passes the very basic example that we didn't cover here is that it's possible that this thing is going to be undefined.

And if you do not handle the case for this thing being undefined,

annoying.

behind that and and reshape how I wrote my types and extending prototypes, then that will also look up the prototype And the network state will have payment solutions. Our API rich product landscape is ideal Right? You don't wanna well, maybe you want would want to, but you don't wanna toast your pizza. You only wanna toast the bread of the sandwich. Right? So you might want to,

I popped open something on my Google

it. It's one of those

Head on over to syntax s.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

data analytics

a point of sale system. So, like, if you are building something will tell TypeScript this is a type guard and is good enough to check for what I want. Interesting that I've I've never

Use the coupon code methods,

That allows your your product to go ahead. Like you built a product and your product is used by people who then need to onboard other people. You need to underwrite them.

treat all lowercase, all one word, and you'll get 2 months free. Thank you so much for Century for being such a great sponsor. We also we got a brand new Sponsor on. So hold on and listen to this. Payments Hub is a new sponsor of us, and they do some really cool stuff It's not me, is it? you are

Around So if you a discriminating union is that,

ad read here that I'll I'll rattle through for you as well.

fleet of APIs that allow you to that you can integrate into your application. And this is not Just you throw it on your website and you sell something.

I don't want to say the the Swiss army knife, but, like, this seems like the API set That you need if you need to be able to do some very often within or let's go back to my sandwich or pizza example. Right? Integrated into some software. You can integrate it into a chain,

Some, accessing payment transaction data Through an API looks really sweet. So you want to check it out at developer.paymentshub.comforward/syntax.

or,

I don't know. I've never heard that Can't collection of words in that melody. Canyon arrow. There's, like, a Oh, Canyon arrow. Yes. Oh. Yeah.

even just users. You can create an issue directly from something that is an issue, an exception in your code. You can assign it to a user right then and there, and more importantly, you can see all of the things that you might want to know to solve that issue. For it. For instance, right, maybe what operating system? What browser? Oh, like, you can see that this is this is coming in from an Internet Explorer on an old Windows computer. You might say, you know what? It. I don't need to solve this issue. I don't I feel like I I don't need to solve this issue because this is gonna be more trouble than it's worth. Either way, Sentry is the perfect a place to keep track of everything that's going on in your application and make sure it's working its very best. So head on over to century.i0.

Yeah. That kinda,

discriminating

check it.

and it kind of just boils down to,

and TypeScript will make a pass out of you.

I think this is one of those things that class and you want to say new possible state values, from very low level All the way through to to accept the payments. It looks awesome.

So should we well, should we, like, start off with explaining what type narrowing is? Yeah. So type narrowing is basically,

Exhaustively

you you're thinking about

So it's like, oh,

the craziest,

Welcome to Syntax.

Boss and Scott

Monday. Monday. Monday.

CSD.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

the tastiest web development treats coming again hot. Here is Wes Barracuda

fundamentals.

it. Discriminating unions and type guards. Basically, It's always nice when these companies, they give us a little landing page just for, it kind of says Simpsons to me.

Monday,

hasty treat, it. We are going to be talking about some TypeScript On this ever done that before,

we're gonna be helping you solve some of those errors that pop up in your TypeScript code That make you very frustrated because you say, hey. This thing is supposed to be this thing. Why is it giving me an error? My name is Scott Talinski. I'm a developer from Denver, Colorado, and with me, as always, is Wes

We're gonna be talking about what is called type narrowing, that things that you would typically have on a date and not on a string. So in union types, you can always use instance of as well, is wrong. You're like, I've done everything I need to do here. TypeScript is wrong. And I'm gonna tell you straight up, that's

check if something was a podcast then at some point you're going to have a bad day and your application is going to crash or You're you're gonna send out an email that has undefined in it. Like, my, possible

a dog or type of animal or any of the custom TypeScript types that you've created.

or MP 3 in audio, then go ahead. And in that case, you're checking that it has, and TypeScript will say, okay, I'll let that go because So it's better to move it out into its own function, which I can see. And then also it's it's more reusable if you have a much more complex Something is is like the property is the type. So I've never there's nothing else in TypeScript like that. You're always returning food or new sandwich. Then then you can check if it is an instance of because that object has been generated different compliance, which is very much appreciated because I've gone down that rabbit hole before. Check it out. Developer.paymentshub.comforward/syntax.

And you say, okay. I know that a podcast will have an m p three property. You could say if,

m p 3 in podcast

And the reason behind it actually doesn't doesn't even work all that well with objects. And the reason behind that is because if you say type of and in that function, there might be, like, toast.

abstract away Sweep under the the Yeah. Ugly stuff underneath the rug. Right? You have all these ugly if checks. You can just sweep it into a singular function that does the the check for you. It. I think that the syntax is the blank is food is sandwich as the return type is is really interesting as well.

this is type

Now I also saw a type narrowing with this is. Have you have you seen that, Wes? Oh, I don't think so. This is. Yeah. So, This is an interesting one where you can use