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

Brian demonstrates how to fix ESLint with the typescript-eslint package and tooling to better integrate TypeScript and ESLint. The new plugins are added to the .eslintrc.json file and a new parser and resolver are configured.

Get Unlimited Access Now

Transcript from the "TypeScript & ESLint" Lesson

[00:00:00]
>> Next thing here, we broke ESLint in the process here, which is kind of a shame, so we're gonna go and fix ESLint here in the process. The other thing is TypeScript has a lot of its own peculiar particular downfalls, and so we wanna have special rules for TypeScript.

[00:00:19] Now, we used to do this with a thing called TSLint, but TSLint has been deprecated and now everyone's converging on just ESLint. So we have to include a special package called TypeScript dash ESLint, so let's go fix that all right now. We're gonna say npm uninstall @babel/eslint-parser, because now we have to have a new parser for this which is gonna be the TypeScript parser.

[00:00:54] All right, and then now we have to get a bunch of stuff, so let's just go ahead and copy and paste it from my notes here, down here in TypeScript + ESLint. We want this one here. So we're getting import-resolver, eslint-plugin and typescript-eslint/parser. So it's just a bunch of tooling to make ESLint and TypeScript play good together.

[00:01:27] And I need a NPM. Okay, that got me all of my ESLint rules, let's go modify ESLint RC. So above the prettier rules here, we're gonna say plugin: @typescript-eslint/recommended. It's kind of a nice step function there. Inside rules, we're gonna have, @typescript-eslint/no-empty-functions. We have a couple of empty functions throughout our code base.

[00:02:17] I found this to not be a particularly useful function or a rule, so we're gonna turn it off for now. You can leave it on if you like, you just have to fix some things in there. Inside plugins, we have to get another plugin here for typescript-eslint. And then the parser here has to be @typescripteslint/parser, like that.

[00:02:55] And then, In the settings array or object rather, we will have one for import/parsers. That @typescript-eslint/parser. Wanna have asterik sorry, .ts and .tsx, this is just telling it where to use the TypeScript parser. You have to use double quotes not single quotes. Okay, and then underneath that we're gonna have another one for import/resolver.

[00:03:46] For typescript. We're gonna say alwaysTryTypes, : true. All right, that was a bit to do, feel free to copy from my notes as well. Took some trial and error to get this exactly right. But basically this is just setting up all the resolvers and parsers and ESLint to all play nice together.

[00:04:16] And in particular, you wanna be able to type check and run ESLint at the same time, as well as just making sure that everything works well together. The nice thing about VS Code is the TypeScript stuff is all built into it. We don't have to install any extensions, everything is just gonna work for you out of the box.

[00:04:31] If you're using something like VI or Sublime, you probably have to go install some additional tooling to get TypeScript working with it. Now, I think if we say npm run lint, so the key here is everything was correct that we did together. You just need an E here online 8, typescript, which I imagine most of you were working, and I was staring at it unable to figure out that you spell typescript with an E.

[00:05:00] So, there it is, line 8, plugin: @typescript-eslint/recommended. Now, We should be able to say npm run lint. And we have an unexpected error function which no empty function, I thought we did that, typescript-eslint/no-empty-functions. My pages empty function. [SOUND] [INAUDIBLE] the day I've [LAUGH] written a lot of code today.

[00:05:36] All right, so there we go. Now we have no linting errors coming back here. That's totally good, but we also want it to run our TypeScript for us. So you can actually add something here at the end. You can say, all right, plugin: @typescript-eslint/recommended-requiring-type-checking. So this is going to be all the additional rules that we're going to introduce that require that the type checking portion of TypeScript ESLint.

[00:06:18] So this is actually like the magic of having ESLint and TypeScript together is now we have an extra set of rules that are going to do all the type checking for us as well. So now, Do I feel like a comma or something like that? Yeah, parser options project.

[00:06:45] So something else we need to do here is we need to add the parser options project, if you tell where your TS configure is cuz it won't figure that out on its own. And I think you'd say ./tsconfig, that should work .json. And there you go. Now we're getting a bunch of hey, this is all broken.

[00:07:17] [LAUGH] So now ESLint is gonna start yelling at us a lot for all these things that are broken. But yeah, make sure you have there, line 21, add the project to tsconfig.json. You just have to let it know all the configurations that you have for your TypeScript project.

[00:07:35] All right, so if you wanna skip all that mess that I just went through in setting this up, getting ESLint and TypeScript together always takes me longer than it should. So if you wanna skip all that, I have a typescript-1 in that project over here, let's take a look at that.

[00:07:55] If you go to typescript-1, this is where we are right now. Let's head over to ThemeContext and let's go type that one. So the first thing here is we're gonna take ThemeContext and we're going to rename that, Rename .tsx. So, that's what we're gonna do file by file, we're just gonna go rename them.

[00:08:26] First the TSX, and we're just gonna fix problems until they're green. So this one, we don't really have to do too much here, we're just gonna say createContext and we're gonna give it some explicit typing here of its getting a string. And in function that is a theme string that returns void.

[00:08:58] So, yeah, let's talk about exactly what it's doing here, this is basically like we're telling it that this is hook shaped. But now if you look at this theme context, now it has a really good idea of what that looks like and now in the rest of our code base, we can enforce that type checking.