Intermediate React Intermediate React

Typing the Carousel Component

Check out a free preview of the full Intermediate React course:
The "Typing the Carousel 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 typing to the React component class methods, Props, State, and handle click event with React.MouseEvent<HTMLElement>.

Get Unlimited Access Now

Transcript from the "Typing the Carousel Component" Lesson

[00:00:00]
>> Brian Holt: So let's go do carousel.tsx so now we can import this from carousel. So carousel and we're going to make this rename here, Carousel.tsx.
>> Brian Holt: So up here we're going to import PetMedia and PetPhoto from petfinder-client class. Okay, now we have to inform React component, like this expects to get media as props.

[00:00:42] So we're gonna say interface Props. Media is going to be a PetMedia.
>> Brian Holt: Okay, and then we're gonna say interface State is going to be, active is gonna be a number. And photos is gonna be an array of pet photo, PetPhoto.
>> Brian Holt: And that should be comma. Okay, and then we just pass into React to say, hey, keep track of these.

[00:01:21] So this is gonna be props, state. So props always comes first and then state.
>> Brian Holt: And so now it knows everywhere is like this has to get PetMedia as props and if I try to, somewhere else use a carousel and not give it media. TypeScript's gonna say, hey I expected those props.

[00:01:41] So I'm not gonna let you compile until you give me those props.
>> Brian Holt: Okay public state, public state, public static, I feel like i'm writing Java, public and public.
>> Brian Holt: Okay, and then add state.
>> Brian Holt: So the one thing it's gonna be mad at next is,
>> Brian Holt: Yeah, getDeriveStateFromProps, so what is this object gonna be right here?

[00:02:30] It's gonna be the same type as Props right? Because it literally is Props, so you just have to say hey this is Props.
>> Brian Holt: Photos here, this is gonna be an array of PetPhoto.
>> Brian Holt: Right, so that's what this colon stuff here is. It's letting it know ahead of time that this in array, but this is the only thing I can stick in this array.

[00:03:01] So if I try and do photos.push
>> Brian Holt: (5), it's gonna say hey you can't do that, this isn't full of numbers, like get that business out of here. This is only for pet photos.
>> Brian Holt: So this forces you to really think through your types and be deliberate about this kind of thing.

[00:03:29]
>> Brian Holt: Okay handle click index here. This is an event. And you'll get used to doing this. Parameters you have to type because it doesn't know what to expect this. And I've turned it on to the fact that it's strict so it doesn't allow any types right? So right now it says like, I don't know what this is going to be, so I'm gonna let it be anything, I'm not going to type check this.

[00:03:47] Which is not what we want, that's kind of the defeating the purpose of type script here. So, what I'm going to do is I'm going to say, event is a React.MouseEvent. And this is an html element coming from it, right?
>> Brian Holt: So it's saying this is a mouse event coming from React, and that the target of it is going to be an html element.

[00:04:17] The next thing inside of here is I have to say, if event.target is not an instant of an HTMLElement. So if event.target instanceof HTMLElement return.
>> Brian Holt: What did I do wrong here?
>> Brian Holt: public handleIndexClick event is of an React.MouseEvent of HTMLElement. If event.target.
>> Speaker 2: You have to apply that not operator to just event.target?

[00:05:20]
>> Brian Holt: That's right, thank you.
>> Brian Holt: So you have to wrap the whole thing in parentheses.
>> Brian Holt: There you go.
>> Brian Holt: And inside of here, we have no promise that index is gonna be defined. So here we have to be defensive of that, too. So if(event.target.dataset.index),
>> Brian Holt: And move that inside of there.

[00:05:59]
>> Brian Holt: So as you can see, this ends up being a little more code. It's a lot more defensive, but this comes at the guarantee that this is not gonna crash.
>> Brian Holt: I think that's pretty compelling.
>> Brian Holt: And thus we have finished carousel. Now carousel's fully typed. Everything else it can just infer, right?

[00:06:21] But what is value here? Value does not exist on type never.
>> Brian Holt: So let's look at, what is photo? Photo is a PetPhoto.
>> Brian Holt: There you go, so you have to type that as well.
>> Brian Holt: And it already knows index is a number because this is a map and that's already typed.