Intermediate React TypeScript

[00:00:00]
>> Brian Holt: We are now going to talk about TypeScript. Now, this is a whirlwind tour of TypeScript. And to be honest with you, this is not really meant to be your first introduction to TypeScript. I will try and explain things as I go along but there are lots of great resources on TypeScript in general.

[00:00:18] This is meant to be a how do you use TypeScript with React? That's the point of what we're gonna talk about right now, so I will not necessarily be covering all the basics of it. An overview of what TypeScript is meant to be. JavaScript is not type safe.

[00:00:34] It's a dynamic language. It's done so on purpose because it's a very productive language to work in, right? If I come in here to my application just somewhere and say const x = 5 and I wanna say const y = x.toUpperCase.
>> Brian Holt: toUpperCase, obviously, this is not gonna work.

[00:01:01] You and I both can see right away that this is a number and that's gonna cause an error right there. You're trying to call an undefined method on here because 5 doesn't have toUpperCase, right? It would have to be some string,
>> Brian Holt: Because this is not type safe, right?

[00:01:22] If you were doing something like some sort of strongly-typed language like Haskell, it'd be just yelling at you saying that doesn't work, right?
>> Brian Holt: So we're gonna introduce a kind of a thin layer on top of it called TypeScript. And now there's kind of two choices here for JavaScript.

[00:01:40] You can either do Flow or you can do TypeScript. The previous version of this course, V3 does Flow. So if you're interested in Flow, go back and look at that one. I'm gonna show you TypeScript today and people always wanna ask us which one is your favorite, which one is the best, which one?

[00:01:55] Which tribe should I belong to? And my answer to that question is I don't care. [LAUGH] I think both them are awesome pieces of technology. They both more or less scratch my itch with it. I more recently have started using TypeScript because I sit next to the TypeScript team at Microsoft and I think they're really cool.

[00:02:14] So and they've shown me some of their tips and tricks. I've seen some of the things that come with it and probably most compellingly is VSCode. This particular editor has deep integration with TypeScript. So it makes VSCode super, super compelling. All right, so I can move back to a base state.

[00:02:31] So I'm gonna show you quickly how to convert a React project into a TypeScript project. I tweeted the other day, cuz I was doing it for this project, that TypeScript is incredibly frustrating until you're about 60 to 70% converted. And then it's amazing, right? It goes from this is the worst and fighting your tools to having the best time with it.

[00:02:53] And it's like flipping a switch. Once you have enough of your project typed, it starts really paying dividends really quickly, cuz you're gonna have things like IntelliSense. You're gonna have things like catching bugs really quickly and really well. There's a bunch of stuff that just makes it work super, super well.

[00:03:13]
>> Brian Holt: So I'm gonna help you do that right now.
>> Brian Holt: So let's go over to our command line here and we're gonna install some new dependencies here. The first one, as you might guess, we're gonna install npm install -D typescript.
>> Brian Holt: Okay? So this installs the TypeScript project for us.

[00:03:40] And I'm going to use this TypeScript project to init my project. So I'm gonna say npx tsc. tsc is the TypeScript compiler, which is gonna come from our Node modules cuz of npx, --init.
>> Brian Holt: So you can see now,
>> Brian Holt: I have this tsconfig.json, that's what I just generated with this last statement right here.

[00:04:10]
>> Brian Holt: If I go look at that in the tsconfig now, you can see here that it has a bunch of stuff in here.
>> Brian Holt: One of the best parts about TypeScript is it's going to give you type definitions for all of your various dependencies. That's going to incredibly helpful to us.

[00:04:33] So a lot of the libraries that you are using already ship with TypeScript dependencies. For example, RxJS. RxJS itself is written in TypeScript. So TypeScript is really easy, has a really easy time of just reading everything coming in and out of RxJS because it's already written in TypeScript.

[00:04:53] But for example, Reach Router, the router that we're using for this project, does not have TypeScript definitions. So what do we do about that? I don't wanna write them. That would be really complicated, cuz I don't understand Reach Router that intricately, right? Well, luckily other really smart people have already done this for you.

[00:05:10] There's a project called definitelytyped and I think it's at definitelytyped.org. It might be, but anyway just search for definitelytyped and you'll find it. And if I say here npm install -d. For example, @types/react, right? React is not written in TypeScript but it does have TypeScript definitions here, @/types/react, right?

[00:05:37] And that's the key here. If I wanna get the type descript definitions I'll just write @types/react-dom, right? And that's how it works. And we'll also grab it for types/reach__router. This one's kind of a weird one because the way that it's typically is @reach/router. So the way you convert that over is you delete the @ part and you put two underscores for the router.

[00:06:09] So that's how you end up with that. So this is gonna out and grab all the definitions, all the TypeScript goodness from, definitelytyped and bring that into our projects. So despite the fact that React is not written TypeScript, we now have all the definitions. So we can do IntelliSense, we can type check, we can do all those great things.

[00:06:27] Because, I mean, if you want to see what a TypeScript definition file looks like,
>> Brian Holt: This is what it looks like. Type definitions for React 16. It is really long. Really long. Extremely long, 2500 lines. Someone went through and painstakingly documented that, all the various types to come in and out of React.

[00:06:54] This is so that at any given time, you know exactly what everything is, which is amazing.
>> Brian Holt: Okay?
>> Brian Holt: Another cool thing about TypeScript is you can do one file at a time. You don't have to build Rome in a day. You can convert file by file by file if you have a big project and piece by piece to being in TypeScript from JavaScript.

[00:07:18] Because JavaScript and TypeScript can interoperate with each other. TypeScript is essentially just a little extra shook on JavaScript anyway. So let's open right now, which one do I do first here? Modal, cuz that one's pretty small.