Intermediate React Intermediate React

Adding Types to a React Component

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

It's best to start typing a leaf component rather than a main application component and build up. Add types to your first component, the Modal component.

Get Unlimited Access Now

Transcript from the "Adding Types to a React Component" Lesson

[00:00:00]
>> Brian Holt: So this is Modal right now. Here's my suggestion, too, if you're gonna start converting one of your projects over to TypeScript, start it at some sort of leaf node. You don't wanna start at the top, don't start at app.js, cuz that's gonna be a real painful thing.

[00:00:14] Instead, start at something like Modal, which is Modal's not really importing anything else here, right? It's just self-contained, so these self-contained components are a really good candidate for converting over to TypeScript. Cuz now, if I convert Modal to being in TypeScript, anything that imports Modal, when I go to convert that, we'll already have TypeScript definitions available for it, which makes it easier to convert the entire project.

[00:00:39] Believe me, as someone that has converted a project of both Flow and another project to TypeScript, this helps a lot. So with TypeScript, it's really easy to opt in to TypeScript checking. I'm just gonna open this in my finder here, so you can see here modal.js. I'm just going to right click on here and say rename.

[00:01:00] And I'm gonna rename it from .js to .tsx. Now why not just ts, it was just called js before. With TypeScript, you have to call it tsx. Otherwise, TypeScript won't understand the jsx. So whereas js and jsx, that's optional, it's your opinion, tsx is required. You have to call it tsx.

[00:01:22] Okay, so now we have modal.tsx. And I'm gonna close this. Now, check out this.el business. What's going on? Why is that not working? Well, TypeScript is gonna kind of tie your hands in a bunch of stuff and make you do things that you may not necessarily wanna do.

[00:01:41] In this case, we're referring to this.el and we haven't told TypeScript about anything on this that it can reference to. So we have to tell TypeScript up front what is this.el. So the first thing I'm gonna do here at the top above the,
>> Brian Holt: Yeah.
>> Brian Holt: Let's do it this way.

[00:02:08]
>> Brian Holt: There's a couple ways we could do this. I could say private el, and this would solve it, but since we're using class properties, let's just convert it all the way and just say it's this.
>> Brian Holt: And now I can get rid of constructor. So this takes care of everything here.

[00:02:31]
>> Brian Holt: And this private, this is actually a thing for Typescript and not necessarily for JavaScript. It's private in the sense that only Modal can access it. But the actual enforcement mechanism for this is type script. So if in another class, they're trying to access private.el, it's gonna say, uh-uh, that's a private one, I'm not gonna let you compile unless you fix that.

[00:02:50] So you can actually enforce this public and private things that we're not able to do before. All these other methods though, they are public, and we need to denote them as such. So public, render public component amount and public component amount. Why are they public? React is calling them, right?

[00:03:08] So it has to be public or React wouldn't technically be able to access it.
>> Brian Holt: Okay, so that happens there. And I think,
>> Brian Holt: So last thing here.
>> Brian Holt: Modal route should be an HTML element. This is another nice thing about TypeScript because we get more and more deep into it.

[00:03:36] You can hover over anything, and it's gonna tell you what it is, right? This should be an HTML element. What happens if Modal is undefined though? This is gonna error. So with TypeScript, we're gonna have to say here, you have to be more defensive with TypeScript. if (modalRoot), this is called the type refinement appendChild,

[00:04:02]
>> Brian Holt: And same here because modalRoot can potentially be undefined.
>> Brian Holt: There you go, now Modal is all TypeScriptified.
>> Brian Holt: So now if we go into any other component, we have access to type definitions in Modal. And it'll do type checking for us on everything that is coming in and out of Modal.