Transcript from the "Typing React Components" Lesson
[00:00:00]
>> Now we're into the React components, and I'm gonna close everything else out. So, there's a common thing you're gonna need to do if you're working with React and that specify your base class, right? So here, I am simply saying that, I have a function and it takes an object with the channel on it as an argument.
[00:00:19] Well, there are more things that React to components take, it have to do with the way JSX works, like children. Children are part of a React components interface with the outside world. So we're gonna end up adding, React.FunctionComponent to a lot of things. Actually, let's make it a React.FunctionComponent generic over any.
[00:00:47] And if you've ever used TypeScript with React before this interface here, this is for sorry, this type parameter is the where you would specify the type of props that this component receives. So the things that it receives from the outside world, I'm going to put this on my clipboard cuz we're gonna have to go run add this in a bunch of places.
[00:01:09] So I'm just gonna keep it handy. All right, loading. What's wrong with this? Children is missing, I bet it just needs this. Let's see. Turns out that was it. Right so for the JSX invocation to work, children has to be there and you have to get that React.FunctionComponent type, and the thing being exploited to make that work.
[00:01:39] So now I basically determined that we need this for every React component. So I'm just gonna go through, and add it everywhere. Just add it to each component, and save. All we have here are function components, they're basically stateless or most of are, unless they're making an API call, in which case there's a little use effect.
[00:02:07] All right, that already has it, so that's a different problem there. I'm just going through each component and adding this type to it. And we're not defining props yet, cuz that's, we're likely just do that in a later step. We've survived this long without a type for our props and so it's not harmful to leave that for later.
[00:02:34] Okay, last one. So now everything is a function component, and we still have some things here that are red. So here all right, I have a callback with it's like a function that receives an argument, and it's an any so, I need to state it. Now, Getting real close, so these are all like array functions where I just need to do something with the callback.
[00:03:25] So all I've done just now, I know it seemed like I changed a lot of code, it was two things. I typed my React components to FunctionComponent, generic over any. And then, for array higher, like higher order functions, I have to add a type to my callback. So we're now down to two errors.
[00:03:46] And my problem here is let's see messages is undefined. And that's because I am using React.useState, and I'm not specifying that this should be an array of things. That might do it. Now you can see that I'm sort of encountering these in layers, cuz when you make it through some piece of code that, you clear the errors away, others are revealed behind it.
[00:04:22] And now it looks as if we are free of errors and let's see what our built output looks like. Let's remove our dist folder just to convince ourselves that output is actually we'll run yarn build instead. Because Parcel is actually doing the building for us here. So we just want to make sure that we're actually getting a built output for this and I see it's building like the TSX files.
[00:04:50] This is this is all good sign, and let's see that disk folder pop up. And there it is. So, we're in good shape, this is where I'm going to make a commit. This is phase one, we've gone from JavaScript to TypeScript files.