Compiler Macros Practice

[00:00:00]
>> Okay, so your turn is to take the dish card and basically strip it down. Go ahead and use your defined props and define emits to practice defining that here. So I will see you on the other side. So first thing first, let's go ahead and throw on that setup attribute.

[00:00:23]
So we can delete that import for sure, and now I can delete this. And then once again let's just comment this out for the sake of making things easier. And then we can canst, statusColor equals computed. And actually I need to import that, so let me use the autocomplete to import that, great.

[00:00:42]
Then that comes down here, that looks good. And then the dish right now, it will be broken but we know that, so that's fine. And finally, we have const deleteDish. It's just a normal function, and once again, we know that this is gonna break so we'll just comment that out real quick.

[00:01:00]
Then we have that, that, that, done, all right. So now we complete what we wanna do, so we have type propTypes. And I'm just gonna say that there is a dish, it will be of type Dish. And therefore when we define the props, we will pass it in via typecasting that we have propTypes and then we run it as a function.

[00:01:23]
Don't forget this part, this part is important cuz it needs to run. And then that takes care of all that because the required property is taken care of by the fact that it's a property on there. And finally, we will define the emits. And this time similarly, we'll also pass it in the typecasting here.

[00:01:39]
We'll use the parentheses so that the event, what is the event called? It's called delete-dish. And then what are we expecting as the payload? We're expecting a dish of type Dish. And finally, what will it return? It's not gonna return anything, so it's void. So once we have that, we're not quite done yet cuz we need to actually refer to the things.

[00:01:56]
So we'll have const props equals this, and then we can say props.dish.status. And then down here, we can just delete this line entirely because when we, wait, I did not define my emit yet, so const emit, there you go. Once I have assigned that, then we can emit.

[00:02:14]
And then once again, control space is I believe how most of us should be able to get to it, that should be Mac or pc. And then that'll give you the auto complete. Now if you're like me and you have a bunch, don't forget that you always have to hit the up key first to get down to the bottom, I don't know why.

[00:02:28]
But for now at least that's how it's ordered on mine. So if you can't find it, it's probably cuz you need to hit up. Then from here, what do we need? Well, we need a dish, so props.dish. There we go. And so we can actually see even the signature here, right, event delete dish takes type dish, done.

[00:02:44]
And I think that's everything. No squiggly lines. Wait, we don't need this anymore, unused, walla, magic.