Intermediate React, v3 Typing ErrorBoundary & Carousel

Transcript from the "Typing ErrorBoundary & Carousel" Lesson

[00:00:00]
>> So let's go to ErrorBoundary.js. You can see here this is already having some issues. So let's go ahead and go fix those. So first of all rename it To be ErrorBoundary.tsx and the first thing at the top from react we're gonna get component but we're also gonna get error info and react node.

[00:00:29] You'll find that you'll use react node quite a bit that's just like here's a react thing, like a react a child or a click a component. So, the first thing we have to put in here that we didn't put before is we didn't have a redirect Okay. So you have to put redirect in there's false.

[00:01:02] Okay and then we have to add types of the parameters here. So, get derived state from errors. We have to tell it what it expects to return. In fact, you can see here, you don't have a return type on this I expect to return type. So here we're gonna say it's gonna return a has error, which is a Boolean, and it's also gonna return a redirect which is a Boolean.

[00:01:35] So actually, what we probably could have done is we kind of made an interface here of state type. And this is gonna be has error. Anyway, you could actually make a type here and then reuse it multiple places cuz you can see that we have a state that does that, we have that.

[00:01:57] I'm not gonna finish that out but that's kinda some of the things you can start thinking about it as like, hey, can I make a reusable interface here? But now this is happy. This one, we need to give it a type of Error. Actually, we can just do that directly in here.

[00:02:18] This is an error. And the info is error info. And This returns what? Also returns nothing then it returns, void. Okay component did update, this just returns void. So void is good, render this returns a react node. So, as you can see here the colon here means this is what it expects is the return type.

[00:02:58] So anytime that you have like a class component here, what are those beat, always return It always returns some sort of react markup, something that react can render. There you go, now ErrorBoundary is totally written in TypeScript. Script It's really what this is like migrating your app from JavaScript to TypeScript is just a game of whack a mole, right?

[00:03:26] You hit one thing, another error pops up somewhere. You hit that one, it goes back to the other place, I don't know. But it's a lot of hopping back and forth. I'm leading you through a journey of like, getting everything right on the first try. But believe me, I actually had to hop back and forth quite a few times like, okay, this expects this from over here, right?

[00:03:46] So yeah, you'll just get used to it. And then once you have the full migration done, then you really don't have to do this as much anymore. All right, so we're gonna hop into carousel now do carousel.tsx. So here from react we're going to import mouse event and react node, from react.

[00:04:18] And then we're gonna do an interface of props. There's some people that insist that you call this iprops. It is up to you what you do. Some people insist that all interfaces must begin with Is. Those tend to be kinda see sharp people, they really like that. I don't care.

[00:04:38] I do, I just follow whatever the established baseline is in any code base, but I just wanted to expose you to both of them. So I'm going to call this one iprops for now. Okay, and it's gonna have an images and that's gonna be a string. And then here to carousel I can identify this component expects iprops.

[00:05:02] So you'll see this as a really common pattern that people will identify the props first, and then pass it in here. You really can just say images, string here, equally acceptable, up to you. If I have like one I'll do it this way if I have two I'll do it our more I'll do it this way but I wanna do to see both.

[00:05:26] So just this component can actually take several. So the first one is gonna be props right then here you would have a state and you can identify what the state's gonna look like. We don't have to do that because we have default state here and react is smart enough and to say that, you gave me state, I'm gonna infer from that.

[00:05:44] And then here would be I context, here's the context of this react component is going to expect. But we're not gonna do that, we just have five props, that's all we care about for now, so that we're we'll do that. Okay, handle index click. This event is a mouse event That will happen on an HTML element.

[00:06:15] Okay and this returns void Okay, and then here all we have to do is above it, just make sure that this actually has a target that we can use. So we're gonna say if, we'll do it this way event.target is an instance of HTML element,. Then return. And now we can be because, it is technically possible that you can get a mouse event that has no HTML element behind it.

[00:06:57] It is technically possible and TypeScript is very defensive to say you need to assure me that I will not get to here without this being an HTML element, and I'm positive of that, right? So once we get here and then we can be positive. All right, this is definitely gonna be real thing.

[00:07:15] All HTML elements do have data sets and this could be undefined but that would just cast to zero which is fine. Makes sense? It's kind of strange. I said, you'd have to do a lot of defensive programming when you're doing TypeScript. Okay, then down here the render this just returns react, node.

[00:07:46] Now, keep in mind It's not TypeScript requiring you to get these return types, just so you know, it's actually ES lint. So the ES lint rules that we put in there, say, hey, every function, I just expect return types. I want to be triple sure, but actually the react component here would already guarantee you that, so, to be honest with you, this is kind of an annoying rule that we're just adhering to because it's part of the ESLint thing.

[00:08:14] But it's always good just to know, here's what I expect here. I don't expect this to ever return anything. So if I tried to say, return five here, it's gonna say, now you know what, you can't do that you told me that this is not gonna return anything, so I'm not gonna let you.

[00:08:32] So, is it helpful? Probably, am I teaching it to you anyway? Yeah. So there's like angle brackets here. These angle brackets represent like I'm basically passing parameters to the component type. So this component type, you can see here, what I have, it has a p equals which stands for props, s equals ss.

[00:08:57] I forgot what the ss stands for, I think it's context but might be different. And this is just letting that component know here is a subset of props that I'm expecting you to deal with, right? It's basically like I said, it's like parameters for a function where I say math mean 5, right?.

[00:09:21] This is where I'm passing 5 to the math.mean function. I'm passing props to the component type and it's gonna do something with it. So in this particular case, the first parameter, right that this generic gets, it's going to assume these are the props that you're getting. The second one that we're not giving, these are the states that you expect, right?

[00:09:41] So they're basically like just parameters to a function. That makes sense, hopefully.
>> Brandon's auto important for you to see the screen.
>> Yeah. I didn't show you that in the last one. Let's just go, I think it was in here that I did that. Well, I'll just I'll show you down here.

[00:10:07] Let's say I needed to look at, I have a keyboard event. So you can see there I have, as soon as I start typing this, it's actually looking at all the types that I have available to me. If I just go down to keyboard event and I hit Enter, that gave me the wrong type of keyboard event that's gonna be the the browser one.

[00:10:24] But there's one that comes from, when it comes from react, what's another thing that comes from react like use state. So here if I type use state and then I hit Enter, notice that it actually just pulls that out of react for me. So that's something that VS code just kinda does for you nicely.

[00:10:46] So if you know something that you have it, you have access to it, you can just start typing it and you hit enter on it and react or type VS code will pull it in for you. Good question, I use it all the time. I get super lazy and I don't like typing things.