Check out a free preview of the full Intermediate TypeScript course:
The "Conditional Types" Lesson is part of the full, Intermediate TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike demonstrates the syntax similarities between JavaScript ternary operators and conditional types. A walk through of each part of a conditional type is also covered in this segment.

Get Unlimited Access Now

Transcript from the "Conditional Types" Lesson

>> Conditional types are kind of a ternary operator, but for type information. In fact, they use exactly the same syntax. And in this chapter, we're gonna look into these things. And we're gonna work up our way to what's coming next in the chapter after this, where we will see that there are some utility types that become possible once we introduce this concept of conditional types.

[00:00:33] Utility types are just, they're things that come with TypeScript for free, that are so broadly useful, that they're just included with TypeScript itself. It's kind of a little standard library. So first, let's talk about ternary operators as they pertain to values. You're used to seeing this in JavaScript already in all likelihood.

[00:00:57] So, it's just if, then, else logic and ternary, of course, just means having three parts. And we have our three parts here, right? So, if we have a value, we could say x is negative only if it is less than 0, right? So if it's greater than or equal to 0, it is non-negative, otherwise, it's negative.

[00:01:25] And there are three parts here. There's a condition to evaluate an expression to use if that condition evaluates to true. And then the expression to evaluate if that condition evaluates to false. All of this is gonna serve you well as we start talking about the equivalent in the types world.

[00:01:46] Let's look at the equivalent in the world of types. We have two appliances here that are used for cooking. We've got a grill and an oven. And they have no common shared method names. So we would say there's not very much overlap between these two things, between grill and oven.

[00:02:04] But that's what we're defining here. And then we can define a type that conditionally turns into either a grill or an oven. And we're gonna unpack this syntax piece by piece in just a moment. But for now, I just want you to observe the result. And the result is, remember, this is just a literal type.

[00:02:28] It's not a value. It's a specific string type, a string that only matches one particular thing. So if we say this is a cooking device of type grill, we get a grill out. If we say it's a cooking device of type oven, we get an oven out. And we also see the very familiar ternary operator at work here.

[00:02:56] And this is a condition. This is what to use if the condition evaluates to true and this if false. So if we strip everything back, we can see the pieces of interest, right? Those three parts. And it works exactly the same way. So we can kind of map it out in this way.

[00:03:18] If we've had a condition, expression if true, expression is false, they're just type expressions, they're not value expressions. And frankly, these two pieces here are not interesting, you could put whatever type you want there. This condition is kind of interesting. So, you can see that we're using the extends keyword here.

[00:03:37] And we've used it in a couple places. So if you took the fundamental course, we used extends to describe constraints for type parameters. A way of saying I take type T, and T must be at least this type. It at least must be an object that has an ID property on it, or it must be at least a string.

[00:04:00] Could be more than a string, but I want, I need to be able to assume that I can treat it as string and as a minimum requirement. Well, in this context, the word means the same thing. We're saying that, T must be at least this type. It's not an equality check.

[00:04:23] I think of it more like a greater than equals comparison. You are at least of this type. And this is the only tool we have as of today's version of TypeScript for expressing conditions. We can only use this extends word.