This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "TypeScript Refactoring" Lesson
[00:00:00]
>> So the first thing you'll find with typing in TypeScript, you get really defensive because TypeScript is like hey, that could be a no and I'm not comfortable with no, right? So you're gonna have to be very defensive like making sure nothing could ever be no, or TypeScript is gonna get really upset with you, okay?
[00:00:18] So the first thing that we're gonna say here is this modal, what kind of thing is it? It doesn't really know. And the other thing that's gonna help us out here. So as we convert each file, we're gonna change it from modal.js to we're going to say rename here, modal.tsx.
[00:00:39] Yes, you do have to put the x or else TypeScript is not gonna check it as react. So I'm gonna change that to tsx here. And now we can start type checking. Okay? So the first thing that we're gonna say is this modal, what is it? It is actually what we call a function component.
[00:01:08] So now we can import this function definition from react and say this modal is actually a function component, which is pretty cool. And now it knows here, this is a function component. That's good. TypeScript is also gonna do a lot of inference for us this modal route you can see it actually already knows like, okay, I know what this is.
[00:01:30] This is an HTML element, right? So it does that, that's called type inference. But now if I try and say immediately after that modal route equals five, it's gonna be like, hey, you tricked me and I'm not okay with that, right? It's gonna say, hey, you can't do this because you already told me this is gonna be an HTML element, if you try and make it a number, I'm not okay with that.
[00:01:56] Okay, so that's the first thing. The next thing is this mutable. So this L ref here, it is a mutable type of any. So the thing that we're trying to get away with is we don't want to have any anys, and what is an any? If I say const x is an any, this means that it can be anything, right?
[00:02:19] So I can say next thing x equals string. And it's going to be like, well, okay, you told me it was in any. It's not being used anywhere, which is why it's underlined there. But we're trying to get away from that because that is where TypeScript is not helpful, right?
[00:02:34] We don't want to have anys we want to have everything to be typed really well. So we're gonna say this elref here is it's either a, Mutable ref object, it always is that actually, but it's either gonna be an HTML div element or it's gonna be null. So this thing is called a generic, which I know we're getting into a lot of things here but it's basically a function of types.
[00:03:07] And the way you call it is with this, right? So, I'm telling you this mutable ref object is either going to contain, right? Because this ref contains things. It's either gonna be a div or it's gonna be a null. In this case it starts with a null and then we're here we set it to be a div.
[00:03:22] But here you can see that I am totally okay with that, right? Everything's going okay. Okay, good so far. Now something that we need to do here is like, it's gonna say, hey, This is kind of sketchy here, I don't really know if this l ref, like I can assign null or I can append child if it's null.
[00:03:55] So I need to be a bit more defensive about and say if null modal root or elRef.current, return. Now why am I doing this? If it ever got here, which had never should, right? But TypeScript is forcing me to be more defensive than I need to be. But if it ever got here, this would be disastrous and it would crash our effect, right?
[00:04:24] And we don't want that. So here I'm just saying in advanced, hey, if this doesn't exist, just don't do it. So it's upset that this could still be null basically, right? So here if I put this into a function, and then I can say if, lref.current. So if somehow this got removed some other way, Then don't do that, right?
[00:04:59] But basically what it was getting upset about is that it doesn't expect this to return anything and I was doing a one liner and just ignoring the return type there and it doesn't like that. And I think if I don't have this, it's gonna get upset. No, it's probably okay there, is that true?
[00:05:20] Alright, well, we'll leave it in there that's in my notes and but, yeah, again, we're just being defensive here of like, if it does exist, do it, if not, then don't do anything. There's nothing to clean up. All right, any questions about this so far? So we just typed modal.
[00:05:45] If you're gonna do a migration from TypeScript, or sorry, from JavaScript to TypeScript, here's my best suggestion for you. Find the leaf nodes of your React application and that when I say leaf nodes I mean like the most outer things that things do not depend on. So in this case modal is a leaf node of this application that, it doesn't import anything else, right?
[00:06:06] And go convert those ones first and then move your way up the chain until eventually we're gonna convert app last and you'll save yourself a lot of heartache by doing that.