Intermediate React, v2 Intermediate React, v2

TypeScript Configuration for React

Check out a free preview of the full Intermediate React, v2 course:
The "TypeScript Configuration for React" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian initialized the application as a typescript project, installs TypeScript, then installs the type definitions necessary to convert the application to TypeScript.

Get Unlimited Access Now

Transcript from the "TypeScript Configuration for React" Lesson

[00:00:00]
>> Brian Holt: So what I wanna do now is we have this project that we've written in just vanilla JavaScript. And I imagine many of you are working in places that are not currently in TypeScript, but you'd like it to be in TypeScript, right? But that means a migration. So what you and I are gonna do today is we're gonna migrate our entire project to TypeScript really quick.

[00:00:18] Just to show you that t's a little painful, it's a little annoying, but it's very possible, okay? So let's go ahead and get started. So I'm in my repo here, I'm in the master branch, and I'm gonna say npm install -D typescript. So I got TypeScript off of npm 3.4 and I'm going to say after that, npx, which is a tool that's going to run npm binaries for you.

[00:00:56] tsc, which is the TypeSript compiler, --init. So this going to start a TypeScript project for us, okay? So now if you go look at tsconfig, which I just generated for you, you get this whole thing of tsconfig.
>> Brian Holt: So there's a couple things that you and I are gonna have to do here.

[00:01:19] Our target is going to be ES2019, or 18, or whatever you want it to be. Looks like it doesn't like 19, so let's say 18.
>> Brian Holt: Then the last one you have to do is preserve jsx right here, uncomment that one and put react.
>> Brian Holt: Yeah, there we go.

[00:01:52] Everything else, you wanna leave relatively the same, The big key here one is "strict": true. Let's talk about strict mode for just a second. If you're gonna just start out with a brand new project in TypeScript, and you wanna just get started as fast as you can, you can introduce TypeScript with "strict": false.

[00:02:12] And this is going to make it a lot easier to get started. But you get less of the benefit, right? The stricter you are with your type checking, the more benefit you get, and also the more annoying it is, right? So it's more beneficial, but it also hurts more.

[00:02:25] So I would say go ahead and start out with "strict": false, maybe? But you should always get to strict mode true. False is only a stepping stone to true. You always wanna get to true. So we're gonna start with true, and we're just gonna stay with true. The next thing that we need to do is, packages like React are not written in TypeScript, right?

[00:02:50] They're written by a different team that doesn't use TypeScript. However, we wanna have types when we use React. Luckily there's a project called DefinitelyTyped that allows people to write types for libraries that they don't control. And then we can import them into our project, right? So that's what happened with React.

[00:03:09] So what we can do in here is we can come and say npm install -D @types/react, right? So despite the fact that React is not written in TypeScript, we can still get types out of it by installing this package. And then we'll do @types/react-dom and @types/react. And it can't do slashes so you do double underscore so types/reach__router.

[00:03:47]
>> Brian Holt: Right, cuz normally it's @reach/router.
>> Brian Holt: And this'll give us all the types for these projects.
>> Brian Holt: So other projects like the FrontEndMaster/Pet one, it already has its own type definitions that ship with it. So you don't have to install types for it, it just has them and it comes with the project.

[00:04:10]
>> Brian Holt: But now we have all of these types that we can use.