Broken typescript intellisense with web workers in VS Code

Question

So I have a typescript/React project in VS Code where I have several different browser apps plus a web worker. The web worker needs different typings from the React apps. By having separate tsconfig.json files in each app, and the web worker folder, I can successfully build and run the project. However, the VS Code intellisense is broken in the web worker code - it is still looking up types in lib.dom.d.ts, which is incorrect. This article appears to offer a solution to exactly this problem, but I have adopted exactly the approach it prescribes, putting separate tsconfigs in each folder, without a tsconfig in the root, and the intellisense still doesn't work properly.

Folder structure is roughly:

- src
  -app1
    tsconfig.json
  -app2 
    tsconfig.json
  -worker
    tsconfig.json

I have not included the actual content of the tsconfigs themselves, because I know them to be correct, since the typescript all compiles perfectly when I build. It's just vscode that does not seem to pick up the correct tsconfig when I am looking at web worker code.

Answer 1

It turns out that VSCode ignores an tsconfig.json file if it is invalid, and it turns out that while it was accepted in my build process, there was a problem with the tsconfig, namely that I had specified "files":[./*.ts], but files only takes actual file paths, not globs. This did not cause a problem in build because tsify (browserify plugin) ignores the files entry in tsconfig!

Answer 2

As an altenative to the accepted answer you can use Typescript's triple-Slash Directives

For example:

/// <reference lib="WebWorker"/>

This is useful if there is a single file out of the tsconfig scope.