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

Brian converts the first component to TypeScript.

Get Unlimited Access Now

Transcript from the "Typing the Modal Component" Lesson

[00:00:00]
>> Brian Holt: Let's go ahead and start migrating things. So by default, TypeScript will not check files that are called .js. This is kinda helpful for us, because we can leave our project in a semi-migrated state, and we could just migrate it piece by piece and not break the application.

[00:00:16] We don't have to do everything all at once. So we're just gonna start with just like one small piece. So let's go ahead and start with the Modal.js right here, right? So I want you to right-click on this, and say rename Modal.tsx. Now I know we didn't do jsx for the JS parts of this, right?

[00:00:42] But with TypeScript, it's more or less required. You can get around it, but let's just not worry about it. Let's just stick with .tsx, okay? And then all of a sudden, everything's going to start turning red and yelling at you, right? Cuz TypeScript is angry.
>> Brian Holt: Sorry.
>> Brian Holt: So the compiler is angry at us.

[00:01:10] So now we have to go through and identify things that it doesn't know how to figure out. We have to give it more hints, right? So on some things, it can just figure it out, right? It can see modalRoot right here and say, like, I know this is an HTMLElement or null because I know what document.getElementById does.

[00:01:26] But I don't know what the hell children is, that's new to me. So let's go ahead and start doing some of these things.
>> Brian Holt: So Modal here,
>> Brian Holt: This is a React.
>> Brian Holt: Function component, function component, function component, there it is.
>> Brian Holt: So, I told it that this is a function component, which it imported from React here automatically for me.

[00:02:08] And so now it knows Modal's a FunctionComponent, which means it knows what children is now because it knows what FunctionComponent is, right? So just by telling it the right hints in the right places, it's able to like, okay, I see how these dots connect, right? And it's going to try to get you to do the bare minimum possible for it.

[00:02:24] But if I hover over this now, I notice that React children is React.ReactNode. So I don't have to tell it that, because it knows.
>> Brian Holt: So now it's gonna be angry at this, because it's gonna say, hey, elRef is, like this isn't good. So we can do a couple of things here.

[00:02:45] The first thing, we already know that React.Modal doesn't re-render very often. So we can actually just put this directly in here.
>> Brian Holt: And now that's gonna be okay. Cuz this is always gonna be a div basically, right?
>> Brian Holt: Okay, useEffect here. So the first thing we're gonna say here is if there's no modalRoot.

[00:03:16]
>> Brian Holt: Which there always will be, but return.
>> Brian Holt: So that's gonna do away with this part. Right, because now, it knows for a fact that I can't get here unless modalRoot exists, right? And this is what I'm telling you, that it won't let you do things like X2 uppercase, right?

[00:03:38] Like modal root. If this doesn't exist, then modal root is gonna be null, right? And then this would cause an error and TypeScript's not cool with that. So once you've done that, then the next thing that you need to do here is you need to make this into a function.

[00:03:51] Because it doesn't expect anything to get back from this function, it expects that this is a void return, and this is technically something that returns something. So as long as we make this so it doesn't return anything anymore, then it's happy again, right? But the call signature of this function needs to be return nothing.

[00:04:11] Right there on line 14.