Speed Up TypeScript in VSCode in 1 Minute 🚀

Dmitry Borody
Level Up Coding
Published in
2 min readSep 5, 2020

--

Sharing a simple tip that saved me hours of my life over the last 3 years working with TypeScript codebases (especially large ones!).

I wish I knew it earlier when I was just getting started with TypeScript…

🤔 The problem

We all know how TypeScript can get slow in VS Code. Especially with some codebases with complex type definitions (think polymorphic as props in UI component frameworks!).

Ever found yourself waiting for the compiler to catch up with you as you type new code or fix errors?

This quickly gets frustrating, slowing down your feedback loops (and fast feedback loops are great to keep you happy and motivated!).

Make TypeScript work faster

Here’s the trick:
Run a separate TypeScript process in watch mode in a terminal tab.
Keep it running as you write code — it’ll respond to changes and highlight errors a lot faster compared to VSCode.

In my experience, the difference can be striking (see the screenshot). It seems to depend on the project and npm libs it’s using, but the general pattern is pretty consistent across different projects and TS versions I worked with.

Here’s how to set it up for your TypeScript project, step-by-step:

  1. Add these 2 NPM scripts to your package.json:
"scripts": {
...
"typecheck": "tsc",
"typecheck:watch": "tsc -w"
...
}

2. Now run npm run typecheck:watchin a terminal tab (I like to do it in VSCode’s Terminal panel).

This starts a separate TypeScript process in the watch mode.

It’ll take some time to start, but it’ll be much faster to re-compile your code incrementally as you change your code.

3. Use npm run typechek if only need to do the check once. It’ll run faster than the watch mode.

I find it handy e.g. before deploying to make sure the build will be succesful.

🙌 That’s it!

I hope this tip will help you to become a more efficient and happier developer (it certainly helped me).

Please share your own experiences — did it help you to speed up your workflow?

--

--

Full-stack web deverloper. 🚀 Solving problems and building products with ⚛️ React, TypeScript, Node.js, Rust.