Intermediate React, v4 Refactor Results & Add a Type Check Script

Transcript from the "Refactor Results & Add a Type Check Script" Lesson

[00:00:00]
>> We just finished TypeScript-4 if you wanna hop into that checkpoint in the code, we're about to do the last one here. So go to results. We wanna fix this one next. Results.js rename. We're gonna call this .tsx, okay? This is we're gonna import at the top here.

[00:00:26] I mean a really easy way to do this, again, if you're using VS code is you can just start saying, hey, actually I know this is a function component. And then you just find it in here. So I see function component here from react. If I click on that, it will just import it for me.

[00:00:43] I'm all about that. Let's type as little as possible life. And then here, this is a good one to know. So we did kind of a bad thing here that we have a pet component and we also have a pet type, right? So if you go and look in our API response types, we have a pet type here.

[00:01:05] This is why proponents of like, you should call this iPet, right? Therefore everything would, you'd have the pet component and then the iPet interface, ain't nobody got time for that. Just kidding. It's probably a good idea, but I'll show you how to handle that here. I'm going to import pet as pet type.

[00:01:26] From ./apiresponse types, and now I can just use this as pet type. So, results function component, and then this is going to take in pets which is of pet type array like that. And that is enough to finish typing results. Again, the react types are really nice. In general, if you just kind of tell it like here's my component, here's what it expects, nine times out of 10 that's enough what you have to do to finish typing in components.

[00:02:13] It's smarter to kind of pipe the types around that you need. Let's go and do app.js. looks like that's our last one, right? Don't worry, this one takes awhile and is the hardest one to do, so buckle up. App.tsx, okay done, yeah, we will have to do anything else [LAUGH] everything else is finished.

[00:02:34] And I find that happens frequently as well when you're doing typings with react, is this one has no props. It has no state. I mean, the state here is just a string. I guess we could have gone and made like a theme type, right? Until it's like, this can only be the colors that I support, but I think that's totally fine.

[00:02:55] We don't need to do that. And that's it, you and I just retyped an entire code base in TypeScript. So now if we do npm run lint, I think we should get no errors. Yeah, we don't. Let's go ahead and add a type check step. So, a big part of this is that whenever I deploy my code and I run it through CICD, I want it to run TypeScript to make sure that if future developers are checking in code, that it passes lint, that it passes typing, that it passes prettierc, all those kinds of things.

[00:03:34] So, what I would do is I'd add a type check here. And you would just dotsc --noEmit. So, by default, type checker is actually going to run the TypeScript compiler, check all your types and then spit out the compiled files which we don't want TypeScript to take care of that, we have Parcel which is already running TSC underneath the hood.

[00:04:04] This is the thing that we will just have it run in our GitHub action. So now if I say npm run typecheck. This is just running TypeScript now. So that's fine. And I always like to make sure things break when I expect them to break. Cuz, It's great that my editor does this.

[00:04:29] But like, let's say that I have another colleague that doesn't wanna use this. They only code in notepad which obviously doesn't do type checking for you. They would have to rely on your CLI as opposed to relying on your editor. So here you can see alright you tried to do this, you can't do to uppercase on a five, right?

[00:04:51] All right, I meant to actually do that. All the same, they're like, hey, this is actually a five and five doesn't have a to uppercase method on it. Another thing a nice thing about TypeScript as you can see this TS2339. You can just Google that, and then it'll take you to what broke.

[00:05:14] So it's a very friendly compiler. Okay, and then here now I'd go into my package.json, I would have my GitHub action run type check I'd have it run Lint and I'd have it run format, I'd make like a format check. So what you would do here is this is how you'd make it run prettier in CICD, --check.

[00:05:46] So then I would have it run format check first, then I'd have it run probably type check next, and then probably have have a run Lint next. And if it passes all three of those things and then probably your test suite, right? And then once you've passed all three or four of those things, then you know like all right, this passes all of my rules.

[00:06:04] This is ready to go to production. That is something that we did not do. Here and package that JSON you have to change Dev from parcel. It's not there, it's on index.html. This has to be app.tsx. Otherwise, parcel doesn't know where to start, right? So save that, now we try and run this.

[00:06:34] Let's refresh the page here. I mean, you'd be on 1, 2, 3, 4. So the way that, Mohammed asked, how would I know what those API responses look like? And the answer is just you have to look, right? Okay, so if I look at the XHR here, I can see this one.

[00:06:58] And I can see here in the response, it has a has an x and index, you just have to look at what the, I guess there's a couple of things you can do. One, you could have something like open API spec, which will generate types for you. That would be the ideal way if your company works that way.

[00:07:13] Otherwise, you just have to look at the API response here and I can see all of these various different things here that are coming back from the API, right? And I just went through and wrote the typings myself, right? So that it has a start index and index has next.

[00:07:30] You just have to look at the response to get that, okay? Douglas asked, from the API, you get a number of results? This number of results is how many total results are available. Not necessarily how many are being returned to this. API always returns 10. So you have to paginate the next one to get the next ten.

[00:07:52] Then this has next here is basically is there another page available to you. Yep that's it, that's the whole thing.