Typing Carousel Component

[00:00:00]
>> So, now if we go back to details you can see it should be less mad about this, right? Cuz now this is actually typed. You might have missed that cuz I did it kind of fast. Sometimes VS Code tries to be pretty judicious about when it reruns your TypeScript for you.

[00:00:19]
Cuz it doesn't want to run it constantly on you. So, you can see there that I had an error that I knew I had fixed, so, just a really quick tool to fix that. I'll just cut the line and then hit Ctrl+Z and that forces TypeScript to run again.

[00:00:35]
So, if I just hit Cmd+X, or I'm pretty sure Ctrl+X on Windows, it'll cut the entire line. And then I'll just hit Ctrl+Z to put it back. That'll force TypeScript to rerun. I do it all the time. You'll probably see me do it a bunch of times in the middle of this.

[00:00:54]
It's one of those things where your code doesn't compile, so you're like if I run it again, it's gonna compile this time. But sometimes it actually does work, so, positive reinforcement. I'm gonna keep doing it, okay, here we go. Carousel, we're gonna go back to Carousel.jsx, please make this Carousel.tsx.

[00:01:20]
Okay, we're gonna do an interface up here, interface. You can call this pProps you can call this IProps. In my notes here I have it IProps because I've been writing TypeScript and React long enough that I've always called this IProps. I just told you that I don't do that in the other file, that these ones for whatever reason, I always call them IPprops.

[00:01:44]
I think that's just a force of habit. It's gonna take an images which is gonna be a string array, right? And then here inside of component, you're just gonna provide this as IProps. And so now it knows that wherever I refer to images, these are an array of strings, right?

[00:02:06]
So, this gets passed into the React component and as you're now typing the type of props. You can give this as well an IState but we don't need to because we already set the default state here. So it already knows that this .state is a object that has an active which is a number.

[00:02:28]
Because it's also reading off the fact that we have a number here by default. So, therefore it assumes that all state is active number. So, this isn't necessary, we used to have to do this, right? We used to have to give it the type of state. But with class properties which is doing this, we don't have to do that anymore.

[00:02:47]
You might ask, well, why can't we do it here with defaultProps? It's because it's static and not necessarily gonna show up in the props, therefore, this doesn't work but this does. We used to have to type state, all the time, but we don't have to do that anymore.

[00:03:02]
Now we just have to do props, with regards to class components, yeah. Great, so, we did that, we told you that we expect props that are gonna be of shape. images, we got that there, array of images. That's all good, at the one thing that's gonna say, hey, you're asking for an event here.

[00:03:25]
You need to tell me what type of event this is. So, we're gonna say that this is a MouseEvent, which we want that to come from React, so, this MouseEvent. Technically is the same shape as a DOM MouseEvent, so, I think you could probably literally put the DOM MouseEvent.

[00:03:46]
They are different, right? So, I try and make sure that it comes from React, right? So, we're importing the MouseEvent from React and we need to tell it what it was pointing at. And it was pointing at an HTMLElement. Okay. Still not quite there, we still have to say because this event, it can still be null, right?

[00:04:18]
So, we have to say, Well, yeah. Let me see. Okay, so we might not have to even do that. So, what we do have to say is, hey, what happens if that HTMLElement does not have a dataset on it? So, we can just say if event.target.dataset.index. So. we can ask the question does it have that?

[00:04:53]
If it does then use that. And I guess we do still have to ask that, okay. So if no event.target. Instanceof HTMLElement. Then just return and do nothing. Okay, so, that was enough to satisfy it. We have to ask, is event.target an instanceof HTMLElement? So, therefore at this point we can be sufficiently satisfied that event.target definitely is an HTMLElement.

[00:05:41]
Every HTMLElement definitely has the dataset object on it. It might not have anything on it. So, here we have to ask the question, does it have an index? It does have an index, great. Now we can set that to active. And here with the unary plus we are coercing it to a number.

[00:06:00]
This is again common dancing with the TypeScript compiler. It's like, right, how can I sufficiently satisfy you that I promise you that there's really gonna be a number there, I promise, right? So, that's what we were doing there. I mean, you should ask yourself, do I think my code is better now?

[00:06:23]
It's certainly more safe but it was safe before, right? What I will say is, right now the API is always giving us well formed data. I think you can imagine a future where it doesn't always give you well formed data. This is going to make you resilient even to things like that, which is positive.

[00:06:42]
It's something to keep in mind. You might be looking at it as this is so much more code to do exactly the same thing. But it's forcing you to be more defensive about your code. Which is gonna make your code more resilient. Cool, so, now we have reached TypeScript dash two, if you wanna go grab that from the repo.

[00:07:08]
Yeah, and we're about, I don't know, 40% 30% through our migration. But it starts going faster which is cool as well.