Custom Types Exercise

[00:00:00]
>> So now that we've talked about all this, let's take a look at the code that we've been building. So if we go ahead and look at our types right now. You might notice that both the dish and the restaurant type share this property called status. And more importantly, status is just a string.

[00:00:17]
When a lot of us know that when it comes to letting users choose something, it's best to have some sort of options that they consistently use. So if we go ahead and take a look back at our restaurants page, and take a look at it. So we can see here that okay status is we have want to try, recommended, do not recommend, okay.

[00:00:33]
And then dishes page similarly there's want to try, recommended, do not recommend, okay? So now this is where we're seeing a use case for having shared types. And more importantly we want something that's a little bit more specific than just generic string type that we have. So we're gonna learn now is learn how to define those things.

[00:00:51]
So the way we're gonna do this is, I'm just gonna call it a type of status. So we're just gonna call it, and what we're gonna learn about here is the union operator which basically allows you to define specific values for the type rather than just a generic like data primitive or whatever.

[00:01:06]
So in this case we had, I think it was Want to Try, I think it was Recommend, and then I think it was Do Not Recommend, okay. And so then what we can do here is rather than just putting like the generic string, we can actually say, This is gonna be a type Status.

[00:01:24]
And what that allows you to do now is that when you hover over this you can see that it actually tells you the exact ones that it allows. Now, we go back over now to our page, you'll notice something kind of funny. Status is yelling at us. And the reason for this is because it's saying, hey, I don't recognize this value.

[00:01:43]
In other words when it says something's overloaded usually doesn't recognize the value. And it's saying what is recommended? And so I'm like, well, I thought I defined it as recommended, but let's go ahead and check the logbook. Nope, we didn't, we call it Recommend. And so it's little things like this that can make a huge difference for helping to start putting really some shape to your application when it comes to like, okay this is the information architecture we're looking for, these are the options we want to limit people to.

[00:02:08]
And so in this case I think Recommended is better than Recommend because that was a typo on my end. And so now if I save it you'll see that that just automatically transposes over. And same deal now on the dishes page if I go ahead and I'm like I think dishes should also get like Delicious status.

[00:02:26]
That's fine, that I did that but then wait a second, maybe it's not because it's not actually matching, right? At this point we want them to share just a little bit easier. And so you see something as simple as creating that custom type and then dropping it between the two we see already there's a ton of benefit, especially when these types are reused multiple times throughout your codebase.

[00:02:48]
Now you're getting those alerts that like, hey, this property you're adding doesn't exist or has the wrong types now, and we can get even more specific. Okay, so we've now created our own custom type. And so I want you all to practice creating your own custom type. And what we're gonna be doing is I want you to create a diet.

[00:03:08]
So actually, I forgot. I have this constants file here to give some guidance as far as what this might be. So basically when it comes to eating food, dietary restrictions are a thing. So I just created four options to keep it simple. There's Vegetarian, Pescatarian, Keto and then there's blank, cuz some of them just, it's like everything that it doesn't matter.

[00:03:26]
And so I'd like you to create your own custom type. Don't worry about referring to the const dietlist, just reference the values cuz we'll be taking care of that in the next one.