Using Types in Multiple Components

[00:00:00]
>> Something that's actually worth clarifying as well is that for the naming conventions for the branches, basically every section will have three parts. There'll be the section number, so in this case, we're in section two, so it'll be o2-begin, so basically, where we start. And then we have the exercise that companies with it, we'll be o2-exercise, and that's like the starting point.

[00:00:17]
And then when we wrap up, and we've coded along, and done everything, that will be your o2-finish, and then we move on each section that way. And so just know that that's the convention for how the exercises and code tracking is working. Okay, so now that we've talked about props with the options API, it's time to get into something a little bit more meaty, right, which is all the other fundamentals that come with the options API.

[00:00:38]
So when we go to the restaurant page, we'll see here that we have this restaurant list. And the nice thing about this three being rewritten with TypeScript is that a lot of inference is happening kind of a little bit more automatically. So you'll notice that restaurant list does have like what it's inferring from the given object.

[00:00:53]
But at this point, we have no way of really telling it that like, hey, this is something that we wanna actually be of type restaurant. And so now we have another problem though is that as we just did inside of restaurant card, we have our typing defined in a different file.

[00:01:08]
So the question, of course, the first thing we need to learn is how do we share those types between the files? And so the easiest way to do this especially once you're getting started out is to create a types file right at the root of the source. So I'll just call it types.ts.

[00:01:22]
Now you'll see some other folder conventions where people have a folder of types, and then they break it down into different modules, that's for when you scale, and you have the types of support that. I don't think it needs to you don't need to jump into that immediately, so let's just keep it simple, and we have this type file right here.

[00:01:37]
And so let me actually close this real quick. And let me bump this over, so you can see the side by side. So all we're gonna do is we're gonna take this tight restaurant that we've defined, we're gonna cut and paste it over here. And then if you're new to doing modules that are contained within JavaScript, all we need to do is basically tell it that we want to export the thing out of the file.

[00:01:56]
And so in this case, we're exporting the type of restaurant. Now when we say this and say this is a good thing because what are we seeing? We see an error because it says, hey, you're referencing this type restaurant, I've never seen it. So well, how do we import it?

[00:02:10]
Similar to before, just like we do with Prop type, we'll insert a prop type of restaurant. Now in my case is actually doing an autocomplete, but sometimes you need to actually just type it out the first time, and then it'll know to do that. But when I hit Enter, you'll notice that it's automatically then importing restaurant from the types it's recognized it.

[00:02:27]
And so if you're also wondering about this alias here, if you're new, this is basically a build alias to let you know to go straight to the root. Because sometimes when you have a lot of nested folders, you get a lot of this trying to figure out where the route is.

[00:02:37]
And so this alias here is just a way to make your life a little bit easier. Okay, so now that we have that, we now have the ability to use the restaurant type across multiple files. So let's go ahead and go on to restaurant's page and see how that might work.

[00:02:53]
So the first thing we need, we're taking a look at this, we say, okay, we have this data object here that has all this reactive data, we need to actually define what the shape of it looks like. More importantly, we need to learn how to actually say, hey, how do we define this as an array?

[00:03:08]
And so typically, let's just go ahead and let's just do a type called DataShape real quick. And so we know that filterText is a string and then restaurantLists here, if you were to think back to how we typically define prop types, you might be tempted to go like, it's like array, or you might be like, maybe it's capital A array.

[00:03:27]
That's not how arrays are defined in TypeScript, the way we do that is we actually define what values we expect inside of the array first. So in case in the event that it's an array of strings, we use a string, and then we would have the square brackets.

[00:03:40]
And that tells you that it's an array of strings. And so what do we want? We want an array of restaurants, so how do we do that? Well, we're gonna import type restaurant, is that actually coming up? Looks like it's not coming up for me this time, but that's okay, we'll do it like this.

[00:04:00]
And so there we go. And then now we can go ahead and do restaurant like this. Save import type, this is where red squiggly lines are a lot are very helpful is we haven't actually converted this file over to TypeScript yet, that's why it's yelling at us. And that's just probably actually why my autocomplete wasn't even working.

[00:04:20]
So let's go ahead and make restaurant page and add the type script attribute to it. And then we need to make sure, just like before, we'll go through an import defined component. And then let's go ahead and wrap our default object with that defined component bit. Scroll down, wrap, this is not right, but I'll fix that later.

[00:04:45]
[SOUND] And that can't end with a ts extension. Okay, there we go. And so see, like the red is squiggly line is super helpful and that's what we want code editor to do for us, right, is front load that stuff. Because while hot module reloading has been great, it's still one more step to have to go to your browser to realize something's broken and then switch back to your code editor to figure out what's going on.

[00:05:05]
And so now we see here that, okay, we have this shape, we have this restaurant list that has a bunch of restaurants. And then actually we have one more property, I believe in our data, we do we have the show new form bit. So let me go ahead and add showNewForm and this is a Boolean.

[00:05:22]
And so we didn't go through this explicitly, but I have assumed sort of some basic knowledge of JavaScript primitive types. So that the things we're seeing here string, number, Boolean, object, these are just basically standard within JavaScript, it's nothing custom about this, so far. But we have learned the custom syntax for array, and that's an important one that you'll probably be using a lot.

[00:05:42]
So now that we have this, we need to actually tell what's the shape of the data like. And so this brings us to a question that actually saw in the chat, which is you'll notice that I'm using an arrow function for the data property. Just for context, what some of you may be used to actually is, let me just delete this real quick just to make it a little bit easier.

[00:06:04]
As you may be used to it actually being defined this way. So it's data as a function with this syntax, and then there's literally an object that's being returned, so it's a little bit longer. There's no right or wrong, it's just that this other syntax is just a little bit more compact.

[00:06:21]
There we go. There it is. Personally, I prefer the arrow function because it's not that you're trying to do anything like setting up anything within the function, we need to use it before you return. And so this is like a cleaner way of just getting it done in one line.

[00:06:33]
Okay, so when it comes to defining things in TypeScript, you wanna basically say what is being returned because that's what we ultimately care about. So we can do here is we can basically add a colon here and see that we want to return this shape of data. And so that's really what you're ultimately saying is that inside of here you're gonna have a shape, and what's that shape data?

[00:06:54]
Well, we have filter tags, a restaurantList which has a bunch of restaurants. And so you can see here that now when you hover over restaurantList, it actually inherits all the properties that come within it. So now I'm not sure if this will yell at me just yet. So this here is one of the things that Typescript makes our lives a lot better is that if someone tries to randomly add this property here, hello message.

[00:07:16]
You'll notice here that it's saying, hey, by the way, I was expecting this, and instead you gave me this instead. And so actually I totally forgot, but you'll notice that here this hovered some of you might not be seeing this because this is a VS Code extension. I believe, it's called like Typescript error translator.

[00:07:36]
Gosh. Yeah, I think it was Matt Bock who might have had that one. Yes, okay, it's this one. Typescript Error Translator, it's a great one to download cuz it's basically an open source effort by the team to or by the community to make TypeScript errors a little bit more readable so that you're not just reading through just mumble jumble.

[00:08:01]
And so basically, as you see here live, it's like, hey, this is the error message you normally get. And then the community says, this is how we think what it means in plain English, super, super helpful when working with Typescript. But anyhow, okay, so this is how we define types on our data is defining it in advance as this sort of data shape.

[00:08:24]
I call it data shape rather than just data cuz data is such a charged word, I think in a lot of things, when you're searching for things. So given that it's this shape of the data, I just call it data shape.