Intermediate React, v3 Typing SearchParams, Results, & App

Transcript from the "Typing SearchParams, Results, & App" Lesson

[00:00:00]
>> Let's go to SearchParams. So SearchParams. Let's rename that Tsx. So, up here we're gonna have to import FunctionComponent. Okay, from here, we're also going to have to import. Nope, not that, that's fine. From APIResponse, import PetAPIResponse Animal and Pet from ./APIResponseTypes. So first of all ANIMALS is obviously an Animal array.

[00:01:04] Now we could have left it, it was technically an array of string as well. But now since we have an animal type we might as well use it here. SearchParams, we have to tell that it is a function component, That has RouteComponentProps. So we can get that from reach-router.

[00:01:31] Now I don't think we actually use those anywhere in here. You could have left those off, and that's totally fine. But you might as well put them in there. It is up there, because technically SearchParams is a route. That's where that's coming from. Okay. This animal here is always gonna be an animal.

[00:01:56] So as Animal. Pets here is always a pet array. So you can put pet there. It's gonna be requestPets for the same thing requestsPets is going to return a promise, and it's like, hey, I don't like it when you don't do something with promises. So we're gonna say void, requestPets.

[00:02:29] Okay, same thing here void requestsPets. Then in the select here, the one thing that's gonna be like hey, you told me this is an animal. I'm not positive these strings I'm getting back are gonna be animals. You just gotta be like, now I promise you they are gonna be animals.

[00:02:49] So as Animal, as Animal. And I think that's it for this one too. Cool. We're now in the TypeScript four, we got one more step here and then we are totally done retyping this entire project. Let's go to results. Rename this to be, Tsx, did I miss something in here?

[00:03:19] PetAPIResponse and messages. Not used that anywhere. Where's this upset? I missed this. In SearchParams, line 26, just got to make this a as PetAPIResponse. I think you have to, that's what I missed. And then PetAPIResponse. And then now it's happy. So make sure on line 26 here you type this as a PetAPIResponse.

[00:04:00] Then you have to import that at the top. And then that will make this happy. The reason I was able to tell is you can see here, files that have errors in them turn red, right? So we just turned results to tsx. And there's a bunch of errors in there.

[00:04:12] So that's what I was looking at. All right, this one should go pretty fast. This is Results.tsx. We're going to Import FunctionComponent From react and we're going to import and here we have a problem. I would like to import Pet from ./APIResponseTypes but we have a problem here.

[00:04:49] You can't have a PetComponent and a PetType, that's why a lot of people like to put IPet in front of these so there's never a collision there. But I'm just gonna say we're gonna import this as PetType, and then you can get around it. So here this is easy we just go function components.

[00:05:14] And it's gonna take, PetType array. You need a colon there. So imported pet is PetType, the FunctionComponent from react. We made this a FunctionComponent it has PetTypes, and this just made everything happy here. So this is what I wanted to show you. Let's say I forgot to put name in here, and I just hit x like this, it's gonna say, hey, I expected name here and you're not giving it to me.

[00:05:54] This is actually probably one of my favorite parts of using TypeScript and react together, is it makes sure that I'm using every component correctly with its props. Same with its state, and context and all those kinds of things. It just makes sure like the, I know that your child's component is expecting this and I'm going to make sure that you give it to it.

[00:06:15] Now some of you might ask, and I haven't shown you anywhere in here, but let's just take a look at what that would look like. Let's say this pet.tsx has an optional one called color, right? And that's a string. If I put it like this, it's going to expect that and it must get that color.

[00:06:35] But if I put a question mark is, it's now an optional one, right?. So if I go in here to results in it, I don't give it color, totally fine if I do, It's gonna say okay, that's fine too. But like if I try and give us something else, like, I don't know, something it's gonna say, hey, you're giving it something and it doesn't expect that.

[00:07:00] So the contract always has to be fulfilled. You can't give it too much and you can't give it to little Okay, let's get rid of that. All right, and so now for the grand finale, the most difficult one to do yet, but. Bear with me for like the next 20 minutes.

[00:07:21] And we'll definitely get through this. We're gonna do App.js and we're gonna rename this to App.tsx. I'm just kidding, we're done. We don't have to do anything here. So SearchParams, why is that upset? Type is missing for that, yeah, this is actually a mistake that we made here.

[00:07:45] I think it's cuz of this. This actually isn't expecting route components. So we can actually get rid of that and save that. And now if we go back to App.tsx, now it's gonna be fun. Cuz before we were telling us like, hey, this is a route, it expects route components.

[00:08:06] And despite the fact that it's actually true, it is a route component. We're not actually using any of that. So it's gonna be like, hey, you said that these were gonna come here. I don't see how they're gonna get here. And the way you would do that is you'd have to use something like with router or you'd have to use something like with router to inject those things in there and we're just don't need to do that.

[00:08:28] So we're not going to. So yeah, sometimes you want to get like a really aggressive with your typing's is like I know this is this and I'm definitely gonna do this. But that means you have to make sure that all that data gets Marshall through or TypeScript is not gonna believe you.

[00:08:47] Okay, you and I in the span of probably what? 45 minutes to an hour or something like that, converted this entire project to TypeScript. So you can see it's a bit of an undertaking now, but I promise you it's worth it. Like once you have your entire project in TypeScript, it's just really easy cuz I can come in here to modal and I can say, import Pet from ./Pet.

[00:09:13] And now I can come in here, and it just gives you lots of really useful It'll start giving you like type hints and stuff like that. It'll start getting very immediate errors like hey, you did this and you expected this and this isn't gonna happen, and this might be normal and it saves you from a ton of bugs.

[00:09:35] Like people like to say that it prevents you from writing, everyone's favorite examples this const x = 5, 5.to or sorry x.toUpper string or Uppercase. That's what everyone loves to say like, look, it prevents you from writing this error is like I typically do not have this error, right?

[00:09:59] I don't typically try and call toUpperCase on numbers. I generally have enough discipline that I don't call those kinds of things, right? And TypeScript does prevent you from doing things like this. The real benefit of TypeScript is it actually helps you write your code faster because you basically get inline documentation while you're typing, because they have all the TypeScript coming with it.

[00:10:20] And you can even get like a point further where you can actually include documentation. So if I start writing something with Pet.tsx, you can actually inline my documentation using js doc, right? So cuz TypeScript can read js doc I'm a big fan. I use it on any project that I intend on maintaining longer than two weeks.

[00:10:42] That's kind of my rule of thumb. If I'm just like knocking out something really fast, I'm gonna use JavaScript cuz I don't need it to be good code. But if it's gonna live longer than two weeks, then it needs to be okay code, because I'm going to come back and longer than two weeks and forget everything that I did.

[00:10:55] And TypeScript just helps me read that back. Okay, lastly, well first of all, let's go ahead and make sure that we fixed all of our errors here that we have. If we say npm run lint. Yeah. So one thing that we have to do is we have to go back to our package JSON and we have to add ts and tsx to both format and lint, cuz now everything is called that.

[00:11:36] So now if we do that again and say npm run lint, No linting errors. That's really good. Let's add another thing here in our scripts. Let's add one called typecheck. And this is just gonna be tsc--noEmit. If you do tsc without noEmit, it's actually going to rewrite your files into JavaScript for you.

[00:12:01] So we're just like doing noEmit. It's just basically hey, typecheck, but don't rewrite it. So let's try that again and that's gonna lint it, that's fine. Let's do npm run typecheck. So we still have one in here. Let's go fix that. That's gonna be in. And this is what they look like.

[00:12:26] So this is good for you to see that. So let's go check out carousel.tsx, And it is upset about this, looks like. So I think we just need to check here to make sure that, let me go back to the this is in carousel. So it's probably good for you to see like how you fix errors when they actually arise here from your type checking.

[00:12:53] You just need to check if index is a thing. So you have to say if event.target.dataset.index, And if I just put that in there then that should fix everything. And the next question might ask me is like why wasn't VS code showing that to me in the first place?

[00:13:14] It just lags behind sometimes. VS codes trying really hard not to get in your way. And so it'll sometimes suspend that type checking in the background. So that you don't necessarily see it. That's how you always wanna check things before you check them in. And now you can see I fixed my last TypeScript error.