This course has been updated! We now recommend you take the Intermediate React, v4 course.
Transcript from the "Adding Types to a React Component" Lesson
>> 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.
>> 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: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,
>> 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.