Intermediate React, v3 TypeScript Setup

[00:00:00]
>> Let's talk about TypeScript. Anyone excited about TypeScript? People are either like, I'm not sure about this. Or they're excited about it and they wanna tell me about it. Or they do not wanna talk about TypeScript at all. And they're just gonna turn off the stream right now, it's a polarizing figure.

[00:00:17] I have to say that I'm a big fan of TypeScript. But also, my peer is the manager of TypeScript at Microsoft. So I'm obligated to say that as well, or he might never talk to me again. All right, well, first thing is we need to get another fresh copy of our repo here.

[00:00:37] So let's go ahead and do that. So you and I are going to quickly convert this entire application to using TypeScript. So we're gonna do a migration together, which I think is probably useful for a lot of you. Because if you wanna use TypeScript, you're probably gonna have to migrate the current application that you're writing.

[00:00:54] Don't get me wrong, it's a lot easier to start with TypeScript. Because then you get all the benefits out of the box. And I have a strong feeling that TypeScript is incredibly annoying and not useful if it's only 30% of your application. But it's the most useful tool in my toolbelt if it covers all of my application.

[00:01:12] So if I can use TypeScript on every file, and they get type checking on every file, it's incredibly useful. But the moment that you're only using an on part of your application, it really loses a lot of its usefulness because you don't get the same guarantees. Okay, so let's do npm i -D typescript@4.2.2.

[00:01:40] So, this is not gonna be a full intro to TypeScript. There's a great course already in Frontend Masters called TypeScript Fundamentals, from Mike North, my former co-worker from LinkedIn. That's really great, so that's a really good place for you to get started. So why TypeScript, what is TypeScript?

[00:02:02] Let's talk about that for just a second. TypeScript is a type checker for JavaScript. JavaScript is an untyped language. Which means whenever you create, like if I say const x = 5, because this is a dynamic language, I don't have to say const x: number, like that. Whereas if you're in something like Java, you need to tell Java this is a number and I promise this is never gonna change from being a number.

[00:02:29] And Java is going to believe you, foolishly, because you're probably gonna trick it. TypeScript allows you to have that same sort of type checking in this dynamic language. And while it ends up being more verbose, you have to write more things with TypeScript. You also get to have assurance that you're not gonna have random crashings cuz of type mismatches.

[00:02:51] But my favorite part of it is that if I import something from React, I don't have to go look at the documentation. I can just look at the types directly in Visual Studio Code. And I will say that Visual Studio Code and TypeScript is like a match made in heaven.

[00:03:05] And it's no accident that the TypeScript team and the Visual Studio Code team are the same team at Microsoft. It's because those two things go together, right? So we have TypeScript now. Now what I want you to do is I want you to say here in your console, npx tsc --init.

[00:03:34] What is tsc? It's another node binary that comes from the TypeScript installation that allows you to run the TypeScript checker. And so the init command here will init a new project for you, it'll give you a new configuration. Okay, so now you should have this tsconfig.json down here.

[00:04:01] And this is a commented JSON file for you. But we have to go change a couple of these, so let's go change them. First thing here, we want this to be not ES5, but ES2020. The modules we're going to be using, I believe the modules, no. What do I say here?

[00:04:32] ES, 2020, let's just do that, ES2020 here as well. And then here, we have to go into the jsx, and we're gonna leave that on "preserve" I think. Okay, so the thing to just think about here is normally the TypeScript binary is going to be doing your compilation of TypeScript for you.

[00:05:00] But in this particular case, it's actually Parcel that's gonna do this for us, so this is actually less important. This is actually mostly for the type checking. Okay, and the one thing to note here is, if you're starting in a really big project, you're gonna start with "strict": false.

[00:05:21] It's not gonna yell at you constantly about, hey, everything is broken. And it's on fire, and I don't know what to do about it. If you put it in "strict": true, it's gonna do that and you're gonna hate it. False is gonna allow you to kinda get started kinda slowly.

[00:05:36] But we're gonna complete the whole migration right now. So we're gonna leave this on true because it's gonna help us out to do that. Okay, the next thing that we're gonna need is we're gonna need some type files. So that not everything is written in TypeScript, obviously. For example, I don't think React is necessarily written in TypeScript.

[00:06:04] So we need to install the types from something called DefinitelyTyped. So this is a place where you can put types for things that are not written in TypeScript. So what's a good example of something that is written in TypeScript? Like Angular, Angular itself is written in TypeScript. Which means that it provides its own definition files.

[00:06:19] Which means that if you install Angular, you get all the types for free. Whereas something like React, you actually have to go to a separate repo to grab the types for it. So you have to say, npm i -D @types/react@17.0.2 @types/react-dom@17.0.1, And @types/react-router-dom@5.1.7. So these are these type files that we're getting from the DefinitelyTyped repository.

[00:07:20] Okay, so now if you look in your package.json, you'll see here that we have a bunch of type files here. These are just the type definitions that allow us to understand how React is typed. Okay, now we're just gonna go piece by piece and convert piece by piece of this app to TypeScript.

[00:07:40] It's slower going, and then it gets faster.