Intermediate React Intermediate React

Typing Pet & Search Component

This course has been updated! We now recommend you take the Intermediate React, v4 course.

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

Add types to the Pet and Search Components.

Get Unlimited Access Now

Transcript from the "Typing Pet & Search Component" Lesson

>> Brian Holt: Cool. Let's do pet.tsx. Rename this to Pet.tsx.
>> Brian Holt: Up here at the top we're gonna import some more types, import. PetMedia and PetPhoto from PetFinder client. What this has, takes some props, I'm gonna say, Interface Props, name is a string. Animal is a string.
>> Brian Holt: So it should be a comma up there.

>> Brian Holt: Breed is a string.
>> Brian Holt: Media is a PetMedia.
>> Brian Holt: Location is a string.
>> Brian Holt: And an id is a string as well.
>> Brian Holt: Okay, class Pet extends React.Component, and this takes in Props
>> Brian Holt: And this photos here is an array of PetPhoto.
>> Brian Holt: And that's it, this one is the wise typed, so not really much, and this has to be public.

>> Brian Holt: So as you see this kind of gets easier and easier as we go along.
>> Brian Holt: So let's go do search context, searchcontext.js. Now, up to you here how you choose to do this. This could be .ts and that's what I'm gonna make it. It doesn't need to be .tsx cuz there is no JSX in here.

[00:02:10] But you could call .tsx and it would work just fine.
>> Brian Holt: So one thing at the top here we're going to disable one .ts just for this file. No empty because we want those functions to be empties. So we gonna say tslint disable no-empty. That's gonna give up on those which is what we want.

[00:02:39] Breeds here is going to be as string array cuz it's gonna be array of string, right, the breeds coming back from the API. And but we do have to type parameters here. So let's do that. So it's gonna be an event and it's gonna be React.KeyboardEvent HTML InputElement.

>> Brian Holt: Because type script is gonna use these types that we define up front to later help us with context. It's smart enough to kind of link those two together. So handleBreedChange is a change event, so. ChangeEvent on an HTML SelectElement,
>> Brian Holt: And LocationChanges the KeyboardEvent on an HTML InputElement, so those are all right.

>> Brian Holt: Now notice we don't have to type animal, we don't have to type location. Why? That's a string. That's really obvious. You know it, I know it, TypeScript knows it, and if it can infer the type just by seeing it, it's like, cool, I'm not gonna make you tell me that that's a string.

[00:03:57] I don't have to say this as string. You can, it's redundant. I think TS gonna say, why are doing that? You're dumb. But again,
>> Brian Holt: All right, so that's good enough for SearchContext. Let's go to SearchBox. SearchBox rename to be tsx. Okay, just a couple of things to do here, we have to make the Props interface.

[00:04:33] Interface Props, search is gonna be function that it gets and this is how you type functions. Just an arrow function that returns void. That's it. Now it knows this is a function that you call with nothing, and you get back nothing. But it has to be there. So now I'm going to say this gets Props, this is a public render.

>> Brian Holt: And I think that's it. Everything else, it knows how to do by itself. But like, how cool is this. I don't really know what animal is. I'm just gonna mouse-over that, I was like, that's a string, right? You just get to see all that kind of stuff just out of the box.

[00:05:19] You're like yeah, you know, I don't know what handleBreedChange is. How do I call that? Well, its method and it takes in a event which is a change event, which just happens on an HTML select element and returns nothing.
>> Brian Holt: That's all just built into here, right, this is where TypeScript is getting really compelling it's like documentation on the fly everywhere

>> Brian Holt: Or like what's consumer? I don't really understand what consumer is. Well, that's a React.ComponentType that takes in location, animal, breeds. All this stuff comes in on the context, and I just have to do that by mousing over it.
>> Brian Holt: I hope your brain was just like this is really cool.

[00:05:59] It's like this is a pain in the ass to type, right? Super pain in the ass to convert a project from JavaScript to TypeScript, but it's worth it most of the time. Results.tsx, let's go do that one. Results.js, rename here, .tsx
>> Brian Holt: So up here at the top we're going to import as well the Pet type from PetFinder Client, but we have a problem.

[00:06:34] This component here is already called Pet, right? So, you just say, hey just call this for now PetType and now it's disambiguated.
>> Brian Holt: And, then we also need from
>> Brian Holt: Route component type, RouteComponentType from reach router from at reach router
>> Brian Holt: Okay, same thing here that we needed from before.

[00:07:08] In fact, we can just go copy that in details, this far as like, hey, just throw if there's no keys. So put this at Details.tsx. I'm gonna put it in Resutls.tsx. Ideally what you do is you have like one import from like a different API client. So you don't have to have this every single time the extension of the API client but we are not gonna fix that right now.

[00:07:33] Above this, this used to have an interface for props and state Interface Props. SearchParams coming from context. Those are going to be location, which is a string. It needs to be animal which is a string, and breed which is a string. Okay, so is like this is an object, this object has three keys.

[00:08:04] And then these have an interface for state as well, state and it's gonna have an array of pets which are going to be of PetType and it's gonna be an array. Then here we give it, Props. No, stop it, Props, State.
>> Brian Holt: Okay, constructors. Constructors are always public so you don't really need to tell it that.

>> Brian Holt: This is public. This is public.
>> Brian Holt: And this is public, so we do that next.
>> Brian Holt: Constructor, say these pets as PetType, an array. I think this is been a little bit redundant. I think you would have been already known that. It does cause it we gave it up there so up to you if you wanna do that or not.

[00:09:15] Inside, right here it says hey. I don't know what this is. You just say this is PepType. That's the only thing we can go in there. That works and it doesn't know what data is.
>> Brian Holt: Data right here, this thing is. It is a PetFinder response. So it does know what that is.

>> Brian Holt: For this, it just wants that, pets instead of pets: pets.
>> Brian Holt: And then down here.
>> Brian Holt: It needs to know that this is the, what do we call them up here, route component props. RouteComponentProps. Cuz these are the props that come in from reach router.
>> Brian Holt: Okay so, that's all good.

>> Brian Holt: But it's even cool that it knows what this context is and it knows that this context matches what search params is looking for. And it just matches a lot, like if I forgot to put this here,
>> Brian Holt: It's like, hey, well results expects this and you're not giving it to results, so that's an error.

>> Brian Holt: So that's good, I think that does it for results.tsx.