Transcript from the "Conditional Types Practice" Lesson
[00:00:00]
>> So, quick little exercise here, with our understanding of how extends works. I want us to look at this list of eight examples, and tell me whether you think this will evaluate to true or false. So, just take a moment and look at these eight things, and we'll reveal the answers in a moment.
[00:00:26]
>> Don't peak down here, this is where the answers are. Don't cheat yourself out of the learning experience here. But just think through these eight situations and see if you can figure out what's true and what's not. We're gonna go over the answers to this eight question quiz.
[00:00:46] And in doing so, we're gonna learn a little bit more about how this extends keyword works. So, we're gonna open up our spoiler warning. And so, as everywhere else in this course, these little code snippets, they're coming like directly from TypeScript compiler output. So you know I'm not lying to you.
[00:01:09] This is compiler results we're seeing as answers. So first, 64 extends number, that is true. And the way I encourage you to think about this, if you watch the TS fundamentals course, we likened types to kinda set theory, where we could say this type here, it's like any number you want, as long as it's 64.
[00:01:37] And over here, it's any number you want. So, the extends keyword, it's kinds like asking a question, does everything on the left fit within the set on the right? So, is the set 64 allowed within the set of all numbers, it is true. And here, we can see that the reverse is not true, why?
[00:02:03] This number set here, that's gonna include the number 63, which is not in the set that only includes 64. So, this is just way too general. It includes things that won't make this type happy. So, number does not extend 64. Applying that same technique, we're seeing if the set of all possible string arrays fits within the set of all possible values that could ever exist in JavaScript, seems true.
[00:02:39] Within everything we could create in JavaScript, of course, we can include all string arrays. In chat says, I thought the inverse. I know man, that's why we're going over this. Like, this is a common misconception and I had to wrestle with this exact same thing. So, the slow and steady approach here is, well, it took for me to learn this.
[00:03:03] So, that's why I'm passing it on to the class. So, yeah, the set of strings is included in the set of any possible allowed values. And the set of all string arrays is also included in the set of all possible arrays. This type on the right includes arrays of numbers, arrays of Boolean, arrays of promises, right, and arrays of strings.
[00:03:27] So, there we go. This one's interesting. I bet a lot of people got this wrong. I bet a lot of people got this wrong. Because when you take things out to the infinities, right, to the infinitesimally strict and the infinitesimally not strict, it's very confusing to think about this, and it's tempting to stop applying the mental model.
[00:03:53] I bet a lot of people got this one right up here, and if you got them reversed, that's fine, right? That just means you didn't understand which direction extends was operating in. But I suspect if you mirror your answers, you might have had inconsistent results between this and this.
[00:04:14] Well, let's apply our same logic here. Never, the set of all values that can make never happy, empty set. Does everything that is included in an empty set fit in the set of all possible JavaScript values? Yes, of course. If we had to write a for loop to verify this condition for answer number five, we would never even loop over anything, right?
[00:04:41] There's nothing to check. And we kind of default to true. It's like, do you have room in your house for everything that's inside this empty box? Sure, [LAUGH] then yeah, there's nothing in there. We have room, that's the way to think about this. Here, this is another kind of interesting edge case, does the set of everything include the set of everything?
[00:05:09] Sure, kind of with the reflexive property, this would better be true. Getting a little bit more complicated here and thinking now in terms of the type for a class constructor like a factory versus an instance. So, we've got first, the instance case, right? That's the interface called date.
[00:05:31] Does this include the set of all things that can be used with the new keyword? That's what this type means. Are you a newable, sometimes people use this newable word, right? So, an instance of date is not newable but if we put this type of keyword in front of it, and we get the type of the factory for dates, it turns out that that is newable.
[00:06:06] Does anyone have any questions about these? So, raise your hand or type y in the chat if you've got at least one of these wrong, and now you kind of understand a little bit more about how extends works, after thinking through it again. So, Dimitri asked the question, the modern set theory has some limitations for case six.
[00:06:28] We don't understand why exactly, maybe I could learn a little bit more about that. What I do think is if we just say, does everything in box A fit inside something designed for B? And in this case, we're sort of moving everything over like by definition, like the set of all strings is included in the set of all strings, right?
[00:06:53] So, Christoph, you make a good point. And if you're watching this course now, you were thinking that extends sort of operated in the reverse direction. You might have thought about it as like, does the thing on the left, is that the larger of the two sets, and then this is the smaller of the two sets?
[00:07:15] It's actually the opposite. Remember, extends is about getting more and more specific. If you have a base class and you make a sub class, and then another sub class, you're adding more properties, right? If we started out with any, we have the set of all possible things that you could create in the JavaScript universe.
[00:07:39] And then, we'll start saying well, all right, let's make it more specific. Let's just talk about arrays. All right, let's talk about just arrays that only contain strings. Well, every time you make one of those statements and you're saying, let's make this more specific, let's define more type information, let's add more constraints, you're narrowing, and narrowing, and narrowing and you're making drilling down.
[00:08:06] And there are fewer and fewer things in your set. So when we say it's 64, it's almost like a weird way to say it, but the 64 have a base class of number. Kind of a base type of number like, if we widen it out, would we end up with a number?
[00:08:29] Like if we made string array more general, would we arrive at all possible arrays, right? Well, making it more general, let's allow non-strings to be included. And then we could say, maybe it doesn't have to be a array, more general still. So, let's start zooming out. These are great questions, and this is one of the best things I can do with this the short time we have together, to help you get over these hurdles.
[00:08:57] Let's put this conditional type concept to work. And we're going to look at an example and build our way up to some of the standard utility types, that are included with the TypeScript programming language.