Intermediate React, v4 TypeScript Setup

[00:00:00]
>> This is not a TypeScript course. There is TypeScript courses on Frontend Masters, and they are quite good. One from my former co-worker and friend, Mike. So if you wanna get really in depth into TypeScript, Mike's course is a really good jumping off point for that. I just wanted to show you how I would refactor our current app to use TypeScript.

[00:00:21] And I think this would be like a good jumping off point of like I understand this application, I understand react, I wanna see how the two work together really quick. So that's kind of the point here. So quickly we're gonna do an entire migration over from our totally JavaScript application, to a totally TypeScript application.

[00:00:37] It's kind of a good example of you, like what migrating to TypeScript feels like. In that it's very painful at the beginning, and then it gets better as you go on and get further towards the end. And then it's great once you have it, but migrating is a pain.

[00:00:51] So first thing what you do is I want you to make another copy of this Adopt Me app, which is here the 12-portals-and-ref. So I'm gonna go do that really quick. So I'm gonna put that in TypeScript, And then I am gonna open that in my code editor.

[00:01:18] Make sure you run npm install on that. So I'm saying that out loud because I need to run npm install on it. To get all of our dependencies. So if you're not incredibly familiar with what like TypeScript is, why you use TypeScript. You've probably heard about it on the interwebs or on the Twittersphere.

[00:01:40] But let's just walk over like the value proposition of what TypeScript is good for. So if I just open one of these random files here. If I have TypeScript here, and I say something like const x = 5 and then as try and say x.toString. Right now JavaScript's like, all right, that seems pretty cool to me, I can do that, right?

[00:02:11] Actually that probably would work. [LAUGH]. Let's do a, Yeah, two upper case, that's a better one, two upper case. Obviously, there's no two uppercase function on a number. But JavaScript is more than happy to say like this looks like plausible JavaScript to me, great. Here some not gonna catch this obviously pretty doesn't catch errors like that.

[00:02:40] So you need something that's actually going to go into type checking, right? So at this point x is a number, right, it a 5. This is a function that's only available on strings, therefore this will err at run time. Typescript actually are gonna say like, hey, this is a number and then later you are trying to call two upper case on a number.

[00:03:01] That doesn't make any sense. I don't think you should do that. So that's kind of the initial value proposition of what TypeScript does for you, but that's kind of like the very surface level like checks or types kind of things. The thing that I actually find more compelling about TypeScripts is the fact that it's kind of immediate documentation on your application that you don't have to write.

[00:03:25] It's just kind of generated by TypeScript itself. And then visual studio code can immediately read from it. And other editors, but the TypeScript team and the visual studio code team are like the same team at Microsoft. I know that cuz I was on that team, right? So that TypeScript is built first for VS code.

[00:03:43] I don't know if that's a common knowledge kind of thing, but that's actually true. So I'm trying to think of like where some of that you could show that would be really interesting this particular application. Maybe here where we use theme context we use it in details. So if I look at this theme context thing here, notice that if I just mouse over it, it says const theme context is a React context.

[00:04:10] And it's of type string or void or string and it returns a void function. We didn't write that type anywhere, right? That's just TypeScript reading our application where we created that here in the theme context and generating that, it's like, okay, I understand what this is. So you get a lot of TypeScript benefit in VS code, even if you're not using TypeScript.

[00:04:38] However, we can actually make this significantly better. Cool, so I think that's my spiel. I think it's living documentation of your application that your editor just kind of makes for you on the fly. And we'll see a bunch of examples of this as we go on. So the first thing I want you to do is open your code or your terminal here and say npm install -D and we want typescript@4.5.5.

[00:05:19] Okay, so we are gonna use TypeScript for this part of the course. In previous versions of this course, I had taught flow. Flow is made by Facebook, and it was made for React. So actually a lot of the types of React are built into flow itself. I'm just gonna throw out there that TypeScript one.

[00:05:38] [LAUGH] It's not really a decision at this point. TypeScript is like blue ray and flow is like HD DVD that's some people still use it, but it's because they have to. [LAUGH] And I won't go into like the merits of either one of them. All right, so we're gonna say npx tsc, tsc trypescript compiler -- in it and this will generate our initial configuration file.

[00:06:14] Okay, you'll see here we have our tsconfig down here. This is called Json C. So Json with comments, so that's why all these comments are in here. You can see, there is a lot of things you can configure with TypeScript. So we're just gonna configure a few things.

[00:06:36] Okay, first make this one es2021, this target here and then I think we have to do the preserve JSX, yep, this one right here, line 16, just uncomment that line. So the next thing is react does not ship with types, right? So some of it will just implicitly understand because it'll import some of those types for you.

[00:07:07] But let's be explicit and actually install the types for react. But some libraries come with the types right out of the box, so you don't have to do anything. I don't like Apollo I think is one of them that does, right, like you don't have to do anything the types come with the library itself.

[00:07:23] Some libraries don't write the libraries in TypeScript and so there's another project called definitely typed, that you can go and install separately the types for the project. So even if open source author doesn't wanna maintain their own types, the open source community can go safe. That's fine, we'll maintain it for you.

[00:07:39] Because it's a million times easier if you have the types for your library. So again back here in your project, we're gonna say npm install -D @types/react@17.0.39. And then we're gonna do it again for react router or so not react router but react dom @types/react-dom@17.0.11. Okay, I think this is pretty cool, it's like a kind a a cool way of managing the types here cuz now If you look in your dev dependencies here, you just have these types here.

[00:08:34] So you'll generally see that a lot in TypeScript projects is still have to install a lot of types for all the various different libraries that don't support it. For example, I don't think we need to do react router dom because I believe that one's actually just written in TypeScript already.

[00:08:48] So we don't have to do anything, they don't have to do anything. The types just come with the project automatically. Actually, I'm positive that's true. Cuz I looked, cuz I wrote this course, believe it or not, I wrote this course. Okay, so we're gonna do a migration which is very possible and actually TypeScript makes it not too bad to do.

[00:09:11] I think the other thing we want to, this is already in strict mode, right? Strict, it is. Okay, line 77 here I'm just gonna throw out here. You almost always want this on. The only reason that you don't wanna turn strict mode on is if you're in the middle of a huge migration, and you can't quite get there yet.

[00:09:28] But strict checking is gonna make sure that you don't do a bunch of really silly things. But it does make it harder to work with, right, it makes it more strict, so it's aptly named.