Union Types

[00:00:00]
>> Let's talk about union types in TypeScript. Let's get back into TypeScript code. And I'm actually going to switch back to VS code here, so we can get hands-on and play with some things. So first, remember this concept of literal types we dealt with earlier, right? Where humidity is literally the number 79, it cannot be any other number.

[00:00:22]
And we can create sets for numbers from 1 through 5, and a set of even numbers from 1 through 9. So here you go, 1 through 5. And we've got it spelled right out here. It's 1 or 2 or 3 or 4 or 5. By the way, don't try to get clever and use.

[00:00:43]
It's possible, but it's slow as hell. You can make TypeScript types do arithmetic for you, but it involves a crazy degree of what we're seeing here. Imagine every number from 1 through 1,000, and then you end up with a lot of types like this. It's possible to do this.

[00:01:03]
It's useful for an example, but don't do this at a large scale. So we've got our type representing 1 through 5. And we can create a value here, lowNumber, it's of type OneThroughFive. And we give it 3, it's perfectly happy. We try to give it 8 and it says, 8 is not on the set.

[00:01:24]
You can't give me an 8. I only accept 1 through 5. Here's our set of even numbers. We've got 2, 4, 6 and 8. We can initialize an even number with 2. It's perfectly happy, but if we try to give it 5, not in the set, not allowed.

[00:01:45]
So here's how we would create a union type, evenOrLowNumber. So there's 1, 2, 3, 4, 5, 6, 8 just as promised. And I'm having to do a little casting here, because, unfortunately, this is kind of funny. TypeScript is a little bit too clever for me to be able to teach this the way I want.

[00:02:11]
It knows it's 5, it's gonna be, hopefully, I'm gonna get very specific for you. So we're gonna leave it cast this way. But this is an example of a safe cast. It's a let declaration, 5 fits within that set, it's perfectly fine.
>> How do you express sets besides enumerating the values?

[00:02:43]
>> That's a great question. How do you express sets without enumerating values? You would really use other types. So if you wanted to create something that's like the set of all possible numbers, It's just this. You just do number. And if you wanted to add the set of all strings, you could do that.

[00:03:06]
Oops, sorry, it's not plural, right? This is the set of all numbers from strings now. That's what this means. So it's a very relevant question, because you would kind of compose types together. You can think of all the types that exist as existing sets, right? Now, we're suffering a little bit here.

[00:03:28]
Not suffering, but JavaScript numbers are all doubles. We have no concept of an integer here which is why I'm having to be very explicit about creating these. It makes it relatable, but it's not. I'm trying to go against the grain here in terms of the way JavaScript thinks about these things.

[00:03:51]
But yeah, you create sets by creating types. And you can define types in terms of other types. And we'll talk more about this syntax here, in later chapters. This is called the type alias, where we're defining a type. So this is the name of the type and then this is how it's defined.

[00:04:12]
We'll get much deeper into that later on. But for right now, observe that it works. Another one.
>> So if numbers in JavaScript are actually doubles, isn't it dangerous to write programs which do math on money? I've heard double and precise numbers are a no-no.
>> [LAUGH] I'm a very good person to ask about doing math with the currency amounts.

[00:04:44]
I would say in this case, you can represent a 1, a 2, a 3, a 4, and a 5 as doubles. They're very simple when represented on the screen. It's like, you do this and make everyone feel a little better, cuz JavaScript's perfectly happy to do this. It's just a shorthand.

[00:05:06]
The fact that I'm writing no decimal point on the screen does not change the fact that these are really doubles behind the scenes. But think of this more like an AOM kind of, where it's got a set of specific values that it allows, which is perfectly fine. It's less about the precision here.

[00:05:28]
We're not necessarily doing math here. We're just observing how sets work. But good question.
>> And you might get into this later, I'm sure you probably well. Can we use expressions in our types?
>> What kinds of it, it's unclear what kinds of expressions.
>> Yeah, I ask for clarification on that.

[00:05:50]
>> This is an expression. This whole thing is a type expression. We have five types here and we're using a union type operator to operate on those types. It's an expression.
>> Did you say arithmetic and hyper expressions is a bad idea across the board or?
>> Arithmetic and hyper expressions is possible, but you have to get really exotic with it.

[00:06:17]
I would put it in the same category where I believe it's possible in Ruby to write programs that are 90% emoji. I wouldn't necessarily advise doing it, but it's possible. Maybe like a hackathon thing where you're interested in pushing the limits of what you can do. But what you end up having to do to make that work would be, not going from 1 through 5 but you go from 1 through 1000.

[00:06:41]
And then you'd need some mapping of like, what is the minus 1 of every number? 999 is subtract 1 from 1,000, you get 999. And then you could recursively apply that to subtract multiple 1s from 1,000. It's incredibly inefficient.
>> So if you thought you needed a type of all even numbers or something.

[00:07:08]
>> It's not possible to define it, literally the type of all even numbers. TypeScript does not give you a way of doing that yet. But this is okay. This is five members. So really, that's a question of something called cardinality, which is the number of members in a set or in a dimension.

[00:07:29]
And here, we would say we have a cardinality of five, it's perfectly fine. We're not going to melt all of our CPU cores with TypeScript trying to figure out what this means. But as soon as you start trying to get into the general case, you would need to exhaustively go from everything between min number and max number allowable in JavaScript and explicitly create every even value.

[00:07:55]
Maybe you could do it but don't. [LAUGH]