Loading
Current section: 2. Union Types 6 exercises
lesson

Intro to Union Types

Loading lesson

Transcript

00:00 Alright. Now, we're gonna talk about unions. We use unions all over the place. And no, I'm not talking about your workers union. I'm talking about union types in TypeScript.

00:10 So this is basically what a union is. It is a type that could be one or more. Actually, it's really two or more different things. So here, this string or number, it could be a string or it could be a number. This little pipe symbol is, right above the return key and right below the delete key on my keyboard might be somewhere else for you.

00:30 But, that pipe symbol, not something we typically use a lot. But, we are using it for unions and it is super. So here we have this value that is a string or a number. You can assign it to a string or a number but not to anything else. And that is useful because lots of times you have lots of, or a value that can be any number of things and you want to have different logic based on what type of thing it is.

00:53 And so a lot of what you're doing with unions is taking a value that could be any one any number of things and narrowing that type down so that you can actually do something useful with it. For example, here we have this value that's a string or a number and we're gonna say type of value is string. If it is, then we're going to, to upper case it. Otherwise, we know it's a number, and we're gonna call to fixed on it. This type of is actually a JavaScript feature that you can actually use.

01:19 It's a runtime thing, and, it, will help us determine the type of something. But not everything has a, type of. This only works for primitive values. So we also wanna think about how to, check the types of other things beyond just, those primitive values like, other objects and things. So that's where type guards, can help out, as well as some other keywords that we're gonna be talking about in this exercise.

01:45 But type guards are a special type of function that allows you to, tell whether or not a value is of a particular type or it could be primitive types, it could be objects or arrays or anything. And so here, you can make your own version of a type guard using, a function with a special syntax right here where the return type needs to be a boolean and it simply is telling us whether the given input is of a certain type. And so here, we're using the in operator to determine whether pet, has a meow property. And if it does, then we know that pet is a cat. And so then, inside of here, we can, use that to, narrow our type down from the general pet down into cat or dog, so that we know how to, what method to call on it.

02:35 And TypeScript can help us through all of this. And then we're also gonna talk about discriminated unions. No. We're not discriminating against unions. This is al algebraic data types, which sounds a lot scarier than it is.

02:48 I promise. But the basic idea here is that you have types that have a matching property that is going to be different. So a matching property name with a different value. And then you can use that property name name to know which type of, thing this is, whether it's success or error. And so in this case, we're gonna say if the result status is success, then we know that the result has data.

03:11 Otherwise, we know it's an error and it's going to have a message. Alright. So that's enough intro for you. Why don't you jump into this one? I think you're gonna have a good time, and we'll see you in the exercise.