Intermediate React, v3 Typing Function Components & Hooks

Transcript from the "Typing Function Components & Hooks" Lesson

[00:00:00]
>> Let's go and look at Pet. Pet.js, let's rename that to Pet.tsx. Okay, so at the top we're gonna have to import from react import FunctionComponent, From 'react' when you give us some IProps. So interface IProps. name: string. animal: string. I mean, it's basically a pet, right, is what it's expecting.

[00:00:53] So we could have said that this extends. Let's just go a little off script and see if this works. Import, I mean, it's literally just o, but the location's slightly different. So we could go in and do some sort of fancy union and pull pieces of one out of the other.

[00:01:13] But let's not do that. Let's just do it this way. I think this is kind of easier for learning. breed: string. images: string array. And so here's a difference, a pet has a city and a state, and this particular component is expecting one location string. And id: number, okay?

[00:01:40] And then here, const Pet is a FunctionComponent, that expects Iprops. And now we have a fully typed function component for pet, which just makes it really useful to us. And that's it. I think that's it. I don't think we have to do anything else. I think the rest of this just works out of the box.

[00:02:09] Now let me show you something that I think is actually quite cool about this. If we want to use it's pets, its results, which is not the next thing we gonna do, but if we go into results. And let's say we forget to give it animal, Or breed or something like that.

[00:02:35] It'll actually start yelling at us. So it won't show us this right now, cuz it's already upset. It's like, I don't know what these are first. You need to fix this before I'm gonna be upset about something else. But it'll actually keep track of, here's what this component expects.

[00:02:48] If you do not give it that, then react will be upset. So it actually tracks the props going into components as well. Does that make sense? So let's do this. I'm just going to copy, This, I'm gonna comment this out. And if I try and just say pet like this, this would normally work, right?

[00:03:11] Because react would have no idea nor would JavaScript have any idea that pet expects anything. For now, let's keep going on our little journey here. We're gonna go type our custom hook here, use breed list. But before we do that, let's get into API response types here. We need another interface.

[00:03:31] We'll just do that underneath here of export interface BreedListAPIResponse. And this just gives us back the animal, which is an animal and it also gives us back the breeds, which is a string array. Okay, now we can use this inside of the, useBreedList. We're gonna rename this first to tsx, useBreedList.tsx Okay, At the top here we're going to import Animal and Breedlist APIResponse from ./APIResponseTypes.

[00:04:47] What do they call this, BreedlistAPIResponse? Okay, now that's okay. Okay, const localCache, here's kind of an interesting one. So what does localCache expect as a key? Normally we'd like to give it something like Key1 is always a string, right, or something like that. But we actually don't know what the keys are gonna be, right?.

[00:05:10] Because the keys are gonna be whatever are being requested back from the API. So we need to be a bit more flexible than that. So, it's always gonna be an index, right? So that's what these square brackets mean. And actually, technically, it's always gonna be an animal. But let's just keep it with string, so it's a little bit more flexible.

[00:05:31] And then it's going to give back a string array. So this is just saying, it will accept any index that's a string, right? It'll accept any key that's a string, as long as those strings are storing a string array, Okay? This has an enumerated type that we kind of invented, which is either unloaded, loaded, or loading.

[00:06:03] So this is the way you do that. You can say type Status = it's either gonna be unloaded, loading, Or loaded. And now, anywhere that this gets used, people can be guaranteed it's one of these three strings, because TypeScript guarantees it, Okay? Export default function useBreedlist the animal, which would be known as to be as always an animal and it returns an array.

[00:06:43] And in that array, we have a string array and the status. Okay, good. Okay, the BreedList, the thing that we have to do here is this is an array, but it doesn't know what kind of array it is. So we have to tell it that this is a string array.

[00:07:10] And unloaded is a status. Once we do that, then it's like cool, I got it. I know everything about this now. It says, all right, I know a status. It's only one of these three strings. And I know that setStatus can only be called with one of these three strings.

[00:07:23] So if I try and go under this as setStatus of lol, it's gonna be like, no, I don't accept that. lol is not a status Which is pretty cool, right? It's cool that those types kinda carry through And I think that's it. Nope, never mind, we got one.

[00:07:45] Let's see, requestBreedList. This doesn't return anything so this is void. Here, this is something that's coming from ESLint as well. It's like, hey, I don't like it when you ignore promises. Promises should be either explicitly ignored, or you should do something with them. Every async function no matter what returns a promise.

[00:08:13] That's just how async functions work. So you have to say void requestsBreedList. I know that's weird. Like, it's not something you'd expect, but it's an explicit way of saying, this is giving back a promise, and I do not care. It's an ESLint rule, it's not a TypeScript thing.

[00:08:29] You feel free to ignore that, but it's part of their recommended rule. So that's why I'm teaching it too. Okay, here we're gonna have to say what this is. And this is a BreedListAPI or what did I call it, this one? It's that one. As blur, and now it knows that this json is a BreedListAPI, so it knows that all these things are safe.

[00:09:07] They might ask, why don't I have to type this? It already knows what it returns, it returns a promise, cuz every async function does.