DEV Community

Dmitry Borody
Dmitry Borody

Posted on • Originally published at dmitryborody.com

Faster TypeScript compilation in VSCode

TypeScript is slow in VSCode?

We all know how TypeScript can get slow in VSCode ๐ŸŒ . 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!).

Here I'm 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โ€ฆ

How to fix slow TypeScript compilation

Hereโ€™s the trick:

  1. Run a separate TypeScript process in watch mode in a terminal tab.
  2. Keep it running as you write code โ€” itโ€™ll respond to changes and highlight errors a lot faster compared to VSCode.

How to make TypeScript compile faster in 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.

Now I don't know exactly how and why this hack works. What's important is that it makes my work life better! ๐Ÿ˜ƒ

And hopefully yours too.

Integrate with your TypeScript project

Hereโ€™s how to make it more convenient to use this trick in your TypeScript projects:

  1. Add these 2 NPM scripts to your package.json:
"scripts": {
  ...
  "typecheck": "tsc",
  "typecheck:watch": "tsc -w"
  ...
}
  1. Now run npm run typecheck:watch in a terminal tab (I like to do it in VSCodeโ€™s Terminal panel to keep things in the same window).

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.

  1. 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 helps you to have a faster TypeScript workflow and to be more efficient and happier when coding (it certainly helped me).

Please share your own experiences โ€” did it help you to speed up your workflow?

Top comments (2)

Collapse
 
hassanhgfd profile image
Hassan Bazuhair

Great That was really helpful
thanks

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ • Edited

What about a Zero-TS compilation in VSCode? Check this out ๐Ÿ˜„