Steps I take to fix stubborn TypeScript errors in VS Code
I'm new to TypeScript.
Of course, that's all changing.
This new project is built with create-t3-app, a framework for building TypeSafe apps with Next.js and TRPC. Out of the box, t3 is configured with some sensible (and fairly strict) settings for both eslint and TypeScript's tsconfig.
If you're familiar with TypeScript, Eslint, and tsconfig you may want to skip ahead to My last resort to fix TypeScript errors in VS Code.
ESLint in a nutshell
If you're not familiar, eslint is a linter - a tool that will help you identify and fix code quality and formatting issues in your code.
tsconfig in a nutshell
When you're working on a TypeScript project,
tsconfig.json is a configuration file that allows you to specify how the TypeScript compiler should behave when it compiles your code.
The purpose of
One of the main benefits of using
tsconfig.json is that it allows you to enforce a consistent set of rules across your project. You can use it to enforce specific compiler options, which helps to ensure that your code is consistent and that everyone on your team is using the same settings.
tsconfig.json also allows you to configure your project's build pipeline, so you can easily automate the process of compiling and bundling your TypeScript code.
tsconfig.json allows you to take advantage of features like incremental compilation, which can significantly improve the speed of your builds by only compiling the parts of your project that have changed since the last build.
How TypeScript works in VS Code
There are a few steps required to set up TypeScript to work with VS Code. If you haven't done this yet, you should follow the instructions on VisualStudio.com to get started: TypeScript in Visual Studio Code.
When you open a TypeScript file in VS Code, the TypeScript language server will start in the background. The language server is a separate process that provides language features like IntelliSense, code navigation, and code refactoring. It also provides the ability to run TypeScript code in the editor. Because TypeScript has many options and plugins, the language server uses the
tsconfig.json file in your project to determine the rules it should use to compile your code.
VS Code needs to determine which version of TypeScript to use, so it will look for a
package.json file in your project. If it finds one, it will use the version of TypeScript specified in the
devDependencies section. If it doesn't find a
package.json file, it will use the version of TypeScript that is bundled with VS Code.
My last resort to fix TypeScript errors in VS Code
Sometimes, when I'm working on a TypeScript project, I'll get an error in VS Code that I can't figure out. I'll check and double-check against articles and tutorials online, or ask my hyper-smart TypeScript friends (Sean Rogers, everyone), and despite doing everything I can think of to address the problem, sometimes I just can't get the error to go away.
Here's what I do when I find myself in this situation:
Make sure VS Code is using the correct version of TypeScript
Sometimes VS Code's TypeScript process doesn't use the right version of TypeScript for the project I'm working on. For me, this seems to happen after updating TypeScript versions, or when switching between projects that use different versions of TypeScript.
To check which version of TypeScript VS Code is using, open the Command Palette (Ctrl+Shift+P on Windows, or ⌘ on a Mac) and type
TypeScript: Select TypeScript Version.
If the version of TypeScript that is selected is not the one you expect, select the correct version from the list. Generally speaking, you'll want to select the version of TypeScript that is specified in your project's
package.json file, by selecting
Use Workspace Version option.
Restart the TS server process
To restart the TS server process, open the Command Palette (Ctrl+Shift+P on Windows, or ⌘ on a Mac) and type
TypeScript: Restart TS Server.
Restart the ESLint server process
On occasion I'll also need to restart the ESLint server process. Just like it sounds, this is the process that analyzes your code for linting errors, according to the rules specified in your project's
.eslintrc file and the version of ESLint that is specified in your project's
If that doesn't work, I'm out of ideas
..and by that, I mean I'm still learning. There's loads to learn about TypeScript, and I've found quite a few great resources online from devs like me who have shared their experiences and knowledge. I hope this article helps you - and if you're looking for more, check these out:
- Kent C. Dodds has a great article called Using fetch with TypeScript which I nearly have memorized at this point. This is the problem I was trying work through when I discovered that I needed to restart the TS server process in VS Code.
- James Q. Quick has a great YouTube channel where he shares tips and tutorials for building web apps with a wide variety of frameworks and technologies.
- I've got some more articles on working with TypeScript in VS Code, including Refactoring TypeScript React components in VS Code