Adding Prop Types Practice

[00:00:00]
>> So you'll notice that inside of the project we have basically two different data types. We have the restaurant, we have dishes. And so just like the RestaurantCard where we added PropTypes to the dish, we need you to do the same for the dish. And so inside of the DishCard, go ahead and take what we've just learned as far as converting a component over to TypeScript.

[00:00:20]
And then importing the define components method and just defining the types for the dish.
>> Working through this, I was curious how much of what we've just seen and implemented is going to be similar when using the Composition API?
>> A lot of the things we're doing upfront right now is to basically accommodate the Options API because we do provide a lot of conventions with that.

[00:00:46]
Because for those who use Options API, we're used to this keyword a lot and this is as you know in JavaScript is a diabolical concept. So TypeScript gets super, super lost and we try our best to hack around that to make your lives easier. But when it comes to Composition API, I'm hoping that people will feel like it's a more native integration with as far as like using Vue with TypeScript.

[00:01:05]
Now I see Galena or apologize if I mispronounced that but I see that apparently, it's not as easy as you expect it so I would love to hear from you when the time comes and as we're going through that. But in the meantime, I think let's go ahead and do the solution for the exercise, shall we?

[00:01:20]
Okay, so for those here in the DishCard, hopefully, you didn't find this exercise too difficult. But basically, we're really repeating what we did before in the RestaurantCard. So the first thing first is we wanna use TypeScript so we're gonna do the language attribute. And actually, there was a great question earlier for those who might be newer to Vue is that this language attribute is not something that's specific to script.

[00:01:41]
Basically, Vue tries to use native attributes within its component, single file component as much as possible. So the lang attribute can also be used unlike style for example, it's commonly used like preprocessors, like lang sass, for example, or for those that use pug might be lang pug. And we'll see that actually, the attributes inside of these single file component blocks can be basically anything you want.

[00:02:03]
And so people have done some pretty interesting things to create some custom attributes and we'll be using one later on in the course to show you that so. Okay, next thing we got to do is to get to import define component from Vue cuz we gotta tell TypeScript, hey, we're using this Options API component wrapper thing.

[00:02:22]
So please, this is what it is. And so if you haven't hovered over it, you'll see that there's a lot going on in here. And that is because once again, we're trying to help TypeScript navigate all of the guardrails that we set up with Options API. Once we have that, we wanna actually make sure that we have the type for the dish so all I'm gonna do is go on to the dish page and we're gonna grab the dish from up here.

[00:02:46]
And so as we can see here, I actually I think I memorized it so we have a type of dish and that has an ID of string, that has a name of string and it has a status with string as well. And that's all it is. And so to actually apply that now to our object, this is where we're gonna practice our as type casting and we're gonna want the PropType.

[00:03:06]
And so what we need to do is import that from Vue. Now, something that actually worth noting though is you might have been compelled to do it like this originally. And so this feels normal because this is how we typically import stuff within JavaScript. But you'll notice though, is that it's yelling at us because it's saying that this is not exactly a traditional JavaScript value.

[00:03:26]
This is actually a type. So as a result, it should be yelling at you but we basically whenever you see input type is because we're trying to tell the compiler that hey, this thing, you can basically ignore it. You don't need to compile it into anything. Okay, so now that we have the PropType, we're gonna use a greater than less than symbol and then pass that in.

[00:03:45]
And then if we inspect now we can see that our dish is a PropType dish. And that's all there is to it.