Intermediate React, v4 Typing a Function Component

Transcript from the "Typing a Function Component" Lesson

[00:00:00]
>> We're gonna go do SearchParams now, we're gonna rename this to SearchParams.tsx, play the game, play the whack moles. All right, so the next thing we're gonna import is a function component. Okay, and it's gonna always be upset about results until we fix that. That's fine. But notice that useBreedList and ThemeContext are fine cuz those are already typed.

[00:00:30] We already did those. We're gonna import some of our responses, PetAPIResponse, we're gonna import Animal, and we're gonna import Pet from APIResponseTypes, that's all good. ANIMALS is obviously an array of Animal, so, Again, we don't have to do this but we know that this is what this is, so we might as well do it.

[00:00:59] And rather than do this in every single file, probably at some point we'll just make a file of enumerated type things that I have, I could put status in there that we just did. And then I would import that from that file which would come with that type rather than just doing it here.

[00:01:14] But this is the only place where we use animals, so we're just gonna leave it like that. Okay. We're gonna say this is a function component. Has no props, so we don't have to worry about that. So, yeah, I guess this is kind of a rule of thumb.

[00:01:37] I don't think you actually have to tell that this is a function, I think this would type just fine without it. Maybe I'd have to check. But in general, if I know a type and I know something more specific than what TypeScript can derive itself, I'll try and tell TypeScript, hey, this thing that you have here is actually this.

[00:01:59] So in this case, I know SearchParams is no mere normal function, right? If you just hover over right now, it's gonna tell you this is a function that returns a JSX element, right? Which essentially is a function component, right, but we can actually tell it explicitly, no, this is actually a function component from the React types.

[00:02:22] Okay, so animal here, this empty string, these are fine, we don't have to change these, but this one specifically is an animal. Okay, and then pets. This is a Pet array. So now you can see everything in here, it has to be a pet to go into here.

[00:02:44] Okay, this one here, we're going to await this as a PetAPIResponse, Okay? That's good. requestPets here. Same thing, we got to void that. Okay, this is one's gonna be like, hey, you're trying to call updateAnimal here with e.target.value, it's like, that's arbitrary string. I don't know what that is.

[00:03:20] We know because we made the options there that this is always gonna be an animal, so I feel pretty confident to just cast that as an animal, same here. And we kind of backed ourselves into this corner by telling it that this always has to be an animal.

[00:03:44] So, you could just leave it off on both sides and it would just be an arbitrary string. But it's good to signify to your future self, hey, this has got to be an animal. Cool, and then here you got a void again. Okay, I think that covers everything, we got breeds down here.

[00:04:18] I think this is a problem from the other typings. Cuz breeds, we told it it's a string array, but now it's saying that it's either a string array or it's one of the statuses, and therefore it can't type it cuz it's an any's. So that tells me we use breedLists.

[00:04:36] We got to come over here, and it thinks that our return type here is either a breedList or a status, but we have to, I think, type this just as, this is always going to be a string array and then a status. And this is now as telling types, which is like, this is not a heterogeneous array where it could be anything on either one of them.

[00:05:06] We're telling this, like, no, no, no, definitely index zero has to be a string array, and index one has to be a status. They're not gonna swap, and they're not gonna mix and match, and don't let it do that. So now this is going to be, that's definitely a string, that's definitely a string.

[00:05:27] It's still upset at this, though. I think that might be cuz breeds, Breeds, this has to be a string array. Okay, so yeah, all I had to do here was move this around. And then now, everything should be typed correctly, it is, except results but we still will go to that in here in just a second.

[00:06:00]
>> In the Pet component, shouldn't animal be type Animal?
>> Yeah, it should. Good call, Animal, and then we just import that from APIResponses. Good call, I mean obviously, it was gonna work because it is a string but the person is following my advice, which is when you know the type better, you should give it the better type.

[00:06:26]
>> And why is animals not an array of strings?
>> It's literally what I just said. It's funny that those two questions came right next to each other. So this obviously is an array of string. And if you call this an array of string, it'll be fine. In fact, you don't even have to do that.

[00:06:46] You can just delete that because it knows this is all strings. But to the previous question's point and the point that I've be been belaboring this entire time. We know that Animal here is a, these are all Animal types that we got from our APIResponse here, right? So this type Animal, this enumerator type is very specific.

[00:07:14] So now if I try and say something like, going back to, what was I using, SearchParams, is that right? Yeah, for example, if I tried to then say here ANIMALS.push("goat"). This should error out and say, I don't know about goats, right? Goats are not allowed in this string, right?

[00:07:39] Despite the fact that this is a string, right, this fits with the type here. But we're being even more specific in saying, no, these are the only kind of animals that we're concerned about in this particular array.