Converting to TypeScript Practice

[00:00:00]
>> We are basically moving on to the exercise part, where we've talked about how to actually use title within the options API for its core functionality. And so your exercise now is to take the dish page that we see here, and now you're gonna reapply all that stuff, right?

[00:00:15]
You got to make sure convert it to TypeScript, then go ahead and type the data. Go ahead and type the computer properties and the methods, whatever makes sense to you. So, we have our dishes page, and actually let me go ahead, and before I forget, let me switch the branch to finish so that we add the solution as we go.

[00:00:35]
So inside of here, first things first, we wanna use TypeScript. So let's go ahead and make it language TypeScript. And then once again in for define component, I'm starting to use autocomplete. Now that you all know where these things are coming from, so the fine component goes here.

[00:00:52]
Let's collapse that, collapse that, collapse that much better, less scrolling. Okay, so the next thing we need to do now is we need to define the shape of the data, so we can say Type DataShape. And we know filter text is gonna be a string. And then we want the dish list to be of an array of dish, but dish does not exist yet.

[00:01:18]
So I'm gonna go ahead over to discard over here, and I'm gonna grab this here. We're gonna open up pipes, and then we're gonna drop a suit alphabetical order just to make it a little bit easier to follow. Export type fish now that we have this exported we can now import the type dish.

[00:01:36]
There you go from types perfect everything works as expected, then over here, we'll do the same thing import type dish. Looks like it's not giving me that, that's fine, and then there we go. So we have our dish. So we've modularized our dish type, and now we're using two files.

[00:01:57]
And finally, we have one more thing which is I believe it's show [SOUND] new form, form, boolean. Great! So now what are we doing? We're returning, we're saying that this is going to be the data shape. And so if we take a look now, this is good. We have a bunch of dishes.

[00:02:17]
This list is an array of dishes. This is fantastic. And so I guess something actually probably worth mentioning is you might have noticed that I tend to notice my arrays with like the thing list rather than just the plural. So instead of dishes or restaurants I found that one-off errors when it comes to typing those things that happens a lot.

[00:02:36]
So dishList makes it really explicit you tend to autocomplete a little bit better, and you won't dismiss like the one letter when typing. So that's just a little convention that I do to kind of offset some of that. Okay, so then inside a computer let's go and do some things here we got an array of dishes because that's what we're filtering for.

[00:02:54]
And then just for the sake of documenting a little bit more, the argument is a dish type which is great, and number of dishes is gonna be a number. We don't want that to ever change, cuz that's what we're actually rendering when we're counting the thing. And then inside of methods, both of our payloads are just gonna be the dish type, cuz that's what we're doing, right?

[00:03:12]
We're adding something to the dish, and then we're deleting something from the dish, and this is great. And then actually just to end take this one too, there's another filter here that will take care of that and then finally hide form, doesn't do anything. And then mounted, we have no, there's nothing really to do there at this point.

[00:03:28]
So okay, that is the solution for the exercise that we just went through. You might have noticed that I'm typing tig instead of git, this is not a typo. This is actually an extension that is built to await take git. There we go. So it's basically a text interface for git.

[00:03:49]
So basically, you'll notice that rather than doing like git status and seeing what's available and then having to be like git add src and component, you know having to figure that out which takes a while. Tig status gives me like a basically a little UI to be like, actually I forgot they were already staged.

[00:04:08]
But you can see that can actually see what stages different files are in, and it's easy to individually select it with my keyboard. I won't dive into how to use this, but in case you wanna look into it, just a little bit of quality life improvement that I like to use for my command line kit.

[00:04:20]
So this is jumping ahead a little bit, but I don't wanna lose the context on this question. So the question here from Daniel in the chat is around the idea of using generics in TypeScript along the extend. So, I wanna show you how things used to look. Basically how you used to actually use TypeScript on view to what you did as like view extend thing.

[00:04:40]
And what it basically allowed you to do is like define a bunch of different like properties on it. So if we zoom in on this, you'll see that it's like data methods. And so interface again, for those who haven't used text before, think of it as a different way to define objects in TypeScript.

[00:04:56]
That's all you need to know right now. There's a lot of argument between which one you should use. Just think of another an alias for type for now. And so this allows you to create like generic types, so that like the concept of generics and type is a messy topic.

[00:05:12]
In my opinion, and I think it's where a lot of you'll actually get messed up. Because it's one thing to annotate what you intend to do, it's another thing to abstract it into generic concepts. Oftentimes when you look at TypeScript generics, you'll notice that whenever you see single letters in TypeScript stuff, that's when you basically they're using generics, because they're basically placeholder variables.

[00:05:32]
Where I will be very explicit. We're not covering that in this because, I do think, it tends to dive just a little too far for people when they're getting started with TypeScript. Most people can just use the straight annotation, and that will already do wonders for helping them just document their code a little bit better.

[00:05:46]
But for those that are interested in TypeScript, I don't wanna leave y'all behind too. And so just so you know, rather than having an extend, the question here is in view three with a defined component, where does it go from here? There is a great blog post here, where he talks about how it works.

[00:06:01]
And so basically, you can see here for those wondering, imagine you wanna have like a function that generates a specific type of component where it comes to these types of every single time. So these are generally called factories. So you can see here that like it's an input select, but we want very specific things to get attached to it.

[00:06:19]
And so there is a way where basically, you can define a component that does take these generic. You see these ts here, so you can define it, pass it in. There is a way for it to happen. So if you understand what generics are you're interested in this I will make sure that this is added as a resource.

[00:06:32]
Okay, so now that we've had like the core functionality of options API sort of taken care of, we're gonna start moving our way now into composition API.