Custom Types Solution

[00:00:00]
>> I'm hoping it was basically, couple liners and then you might have realized that you had some other work to do but we'll demo that all together right now. So, to recap, what I asked you to do is to take this value in here, inside of the dietList.

[00:00:13]
And to make that available to us as a type. So, I'm just gonna copy and paste that just to make my life a little bit easier. But so, I have a type Diet =, and so, we need to use this pipe operator as sort of the, it's called a union operator.

[00:00:26]
So even, though I know that in JavaScript we typically think of it as or, it's kind of, how I say this. It isn't or in this situation, but when you use this operator with an object, I will tell you right now it does not work that way. So I'm not gonna dive into the why, there're plenty of types of resources for you to get into the nitty and gritty of this stuff.

[00:00:45]
But if you think of it as the or for the basic strings and that kinda stuff, I think that's the easiest way to think of it. Okay, so we the diet here and I ask to augment both things, right? So, if you go into diet here and throw that in here.

[00:00:58]
And with the diet Diet, that's fairly straightforward. But the thing is, is if you happen to go back to any of your other files, it is very, very mad. [LAUGH] And that is because, well, we don't have a diet for any of these. And so, here's the thing.

[00:01:17]
One of the things you could do is we could certainly go in there and manually add diet. And say, okay, let's force a diet attribute and everything. But that's not always the most practical thing to do. And what you wanna do sometimes with your types is to say, well, maybe it doesn't have this property, maybe this is an optional property.

[00:01:31]
How would we do that? Well, one of the things you might think of, right, with our new union operators, well, we can just say, we could be undefined. Maybe this is a way to prevent it from doing that and then we say, that does that really do anything?

[00:01:43]
Not particularly, but this is a way that typically people would do if people cuz Tyson was sometime yell at you for a value, right? And so sometimes you'll see people try to define things with the union operator for undefined. But the cleaner way to do this, if you haven't seen this yet, is the question mark.

[00:02:01]
This is gonna be introduced more into JavaScript syntax of, does this thing exist? And so within the TypeScript realm, this basically says, make this thing optional, doesn't have to appear. And more importantly, it takes care of that like, if you don't have a diet and it's undefined, it's not gonna yell at you.

[00:02:15]
So it kinda does two things at once. So once you add that, now our Restaurant page is much happier. And if we go to our dish page, totally fine, it's good. But if we decided, okay, now, this one has a diet, and I'm gonna call this one Paleo, right?

[00:02:31]
Well, this time is gonna be, well, by the way, Paleo doesn't exist on this thing. But you'll also notice remember that optional thing, this is also just the proof is in the pudding. You'll see that says diet or undefined. So that question mark does automatically, basically, piece that together for you automatically.

[00:02:48]
So yeah, if you're ever unsure you're gonna get a value, be sure to use that optional operator.