Intermediate React Intermediate React

Typing the Rest of the App

Check out a free preview of the full Intermediate React course:
The "Typing the Rest of the App" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Finish adding types to the React Application.

Get Unlimited Access Now

Transcript from the "Typing the Rest of the App" Lesson

[00:00:00]
>> Brian Holt: SearchParams, we're getting close to the end here, we have refactored almost all of these. Rename this to .tsx.
>> Brian Holt: This needs to be public and that needs to be public, so these are both public methods.
>> Brian Holt: And we need to get RouteComponents from up here, RouteComponentProps.
>> Brian Holt: And this just takes in RouteComponentProps.

[00:00:37] I don't think it was technically an error not to have that, but it's just good to know that in the future if I try and come in use props, this has already been typed for me. So that's just a useful thing to do.
>> Brian Holt: But that's it for search props.

[00:00:52] I think the last one up is App.tjs, which we're gonna rename to App.tsx.
>> Brian Holt: Okay, again, from details we'll just grab this process.env thing, that'll throw off if there's no API keys. And we will put that in App.tsx here at the top.
>> Brian Holt: Below this pf call, right here, we're going to class our state.

[00:01:23] And this has a lot of states, so we're gonna have to do a decent amount of typing here, interface State, location string.
>> Brian Holt: animal is a string. breed is a string. breeds is a string array.
>> Brian Holt: handleAnimalChange,
>> Brian Holt: Is a,
>> Brian Holt: Takes in an event which is a React.ChangeEvent, which takes an HTML.SelectElement and returns nothing.

[00:02:12] This should look familiar, this is what we were doing inside context. But you have to kind of duplicate this a little bit, because you need to let it know these things match up, these pieces fit together. So handleBreedChange. There's gonna be a React.ChangeEvent as well. I think one of these is mixed up.

[00:02:34] Let's see what I have in search contexts in just a second. This will be an input here. Yeah, let's finish that up. handleLocationEvent is a ChangeEvent on an input.
>> Brian Holt: So let's just open our select or context.
>> Brian Holt: handleAnimalChange was a KeyboardEvent.
>> Brian Holt: I figured each one of these is right.

[00:03:29]
>> Brian Holt: Let's go over and look at my complete code here, TypeScript.
>> Brian Holt: Which one of these is correct? App.tsx, ChangeEvent, they're all ChangeEvents, so these are wrong.
>> Brian Holt: And HTMLSelect, HTMLSelect, HTMLInput. Okay, HTMLSelect, HTMLSelect, HTMLInput, okay.
>> Speaker 2: Does that mean you're closing carrots on the left file there?

[00:04:03]
>> Brian Holt: This is a ChangeEvent, hold on, ChangeEvent. Okay, sorry, what did you say?
>> Speaker 2: I think you might need your closing carrots after-
>> Brian Holt: Yep, you're right.
>> Brian Holt: Okay, so this is what it looks like. handleAnimalChange is a React.ChangeEvent, SelectElement, ChangeEvent, SelectElement. And this is a ChangeEvent which is an InputElement.

[00:04:34] Now, if you look at the context, I modified that as well, Search.Context, ChangeEvent, ChangeEvent, ChangeEvent, InputElement, SelectElement. And that should be a SelectElement as well.
>> Brian Holt: It's really key to these line up routes, things break. Okay, going back to App.tsx, one more method here which is getBreeds, and this is far simpler, it takes no parameters and returns nothing.

[00:05:12]
>> Brian Holt: Okay, here we're going to give it nothing for the props cuz it takes no props and then give it State. The constructor, it takes the no props, so you just delete that.
>> Brian Holt: And what did I do here? Okay, so I guess you just don't have to call super.

[00:05:51] But yeah, that's what I thought, you do have to call super.
>> Brian Holt: And props are just an empty object, I think, cuz that's what you say, and you just pass that props up. So this is saying, I expect nothing from these props, this could be anything. Or rather, I expect it to be an empty object, pass it on to React cuz I don't care what it is.

[00:06:21] And this is complaining that string animal,
>> Brian Holt: handleLocationEvent, handleLocationChange, right? There we go, AnimalChange, BreedChange, LocationChange, that works. This is public handleLocationChange, public. public.
>> Brian Holt: public. public. And public down here.
>> Brian Holt: And then we have to go type all of these events, which I'm just going to copy and paste these cuz I'm very sick of doing that.

[00:07:20]
>> Brian Holt: AnimalChangeEvents are on SelectElements, LocationChanges are on Inputs.
>> Brian Holt: And BreedChange are on,
>> Brian Holt: SelectElements as well.
>> Brian Holt: And I think that covers all of our basis.
>> Brian Holt: So what is carousel upset about? So you can see here that in my coding, you can see that carousel is red, so it means carousel is still upset by something.

[00:08:03]
>> Brian Holt: And this is something that we had fixed previously. We never typed photos active is. So here you can say,
>> Brian Holt: We know that photos is a never.
>> Brian Holt: Photos is Pet.
>> Brian Holt: Here we have to say, as PetPhoto array.
>> Brian Holt: And that should fix that, cuz now it knows this is PetPhoto, cool.

[00:08:51] So what I did is I typed this photo as a PetPhoto up here. So I guess that was required. Last thing in here is Results.tsx. This is upset by what? Props, you just gotta tell it what it is, props are props.
>> Brian Holt: And Results is still upset by what?

[00:09:23] RouteComponentType.
>> Brian Holt: Yep, there we go.
>> Brian Holt: Now,
>> Brian Holt: This entire project is now in TypeScript. [LAUGH]