Conceptualizing Union & Intersection Types

[00:00:00]
>> Next we're gonna talk about union and intersection types. We've seen or and and for types a couple of times, really just or so far, but we're gonna dive deep into them. We're gonna learn how to understand what this means, and we're gonna lean heavily on this mental model of thinking about types as sets of allowed values.

[00:00:22]
So just to help us understand what's going on, so we can we can build our mental model with an evidence-based approach. Where we can kind of create situations for TypeScript to tell us stuff, and we can prove to ourselves that it works in a particular way. Let's create two sets here, we've got evens, even numbers under 10, and then we've got 1 through 5, which is the numbers 1 through 5.

[00:00:48]
These are two sets. And if we drew these on a Venn diagram, they would look like this, right? 2 and 4 are in both sets, but low numbers has 1, 3, and 5 they're not even, and evens has 6 and 8, which are both greater than 5. So those are not shared by the sets.

[00:01:08]
Union types, this is or in TypeScript for types. TypeScript uses the pipe symbol for this, which makes it easy to remember, because it's kind of conceptually related to double pipe, which we know from JavaScript is how we can express an or logical Boolean operator. In the above example, if we wanted to create the set that is represented by 1 through 5 or evens, what effectively we're saying is you're allowed in this set if you belong to either of these sets, right?

[00:01:44]
If the bouncer's at the door to let each value into the set, if you're less than 5, you're good, if you're 1 through 5, you're good, also if you're even, you're also good. We accept all of these values, and that's why we get this set here. This is what you would see in TypeScript as well 1, 2, 3, 4, 5, 6, 8, you could think of this almost like we're taking all of the first set.

[00:02:08]
And then Evens, we're gonna go through and we'll check to see if something's already in the set, and if it's already in there, we won't do anything. But it's gonna find 6 and 8, and it's like, I'm gonna add these to the set. It's almost like some for loop behavior is happening behind the scenes.

[00:02:28]
So one thing that I want us to ask ourselves here, there are two different modes we can think about. There's what values is a type willing to accept? And then on the other hand, what guarantees do we have, what can we depend on being true for every member of that set?

[00:02:52]
So for example, here, well what values can it accept, anything in either set, but what can we assume? Well, if we needed to pass something that was of this type to a function that only wanted even numbers, we couldn't do that, there are odds in here. There's a possibility that it's the number 1, that's not even, so you can't pass for an even if you're the mix of these two sets together.

[00:03:20]
And you can't pass for a number between 1 and 5 either, because you could be 6 or 8. So there's sort of two ways to think about it, what values are allowed versus what guarantees do we have? That'll be a common theme here. So let's think about intersection types, this is the opposite, well, this is and for types.

[00:03:41]
It's the opposite in some way, which I'll save that for the fancy finish here. You can think of this as and for types, TypeScript uses this ampersand, or and operator. And again, like you probably use and and in logical Boolean operators and conditions if you're just writing regular JavaScript.

[00:04:01]
So hopefully easy to remember there, and let's look at the set 1 through 5 and evens. What we would end up with is this set, we'd end up with this set, right? It's only 2 and 4, it's only the things that are shared by the sets. When we're saying and, we're not saying all of the values in this set and all of the values in the other set.

[00:04:27]
We're saying, all of the values that are in this set and the other set, right? And what passes is 2 and 4, you have to be a member of both. So, sometimes it's easy to get confused about which is the and, and which is the or, why do we call it an intersection type?

[00:04:47]
When we're using the and sign, right, it makes us think that it's the two bubbles together. Just remember that when we describe types, we're describing a requirement, a constraint, if you will. And what we're saying here is you must pass both constraints. There's two bouncers in a row, you've gotta be in both or we don't let you in.

[00:05:09]
Whereas up here, look either, either works, maybe there are two doors with a bouncer for each set, and you can try both, and you get in one way or the other, right? So that's why this is the smaller set. Now if we think about what values are allowed, well, it's very strict here, you have to meet both requirements.

[00:05:29]
But in terms of what we can assume about these values, well, if we had a function that wanted even numbers, could we use this, are 2 and 4 even? Yes, and if we had a function that demanded that we only pass numbers between 1 and 5, can we use this?

[00:05:48]
Sure, so we kind of get the benefits of both sets, we can pass for both because we're in that intersection. So it's sort of two different ways to think about this. What is the type willing to accept as a value, and then what guarantees do we have about every single member of that set?

[00:06:09]
And in this case, it's both even and digits between 1 and 5 meets both requirements So there you go, values allowed in the set, there's your first piece of the mental model.