How to get TypeScript language service to not complain about global types?

Question

I've read this answer about how to extend built-in types, but it only tells half the story. How do we tell TypeScript where to find our global definitions?

I've created a file,

src/cssom.d.ts

interface HTMLElement {
    computedStyleMap(): any
}

And then tried including it with include (not sure if this is the best option or not):

tsconfig.json

{
    "compilerOptions": {
        ...
    },
    "files": [
        "src/index"
    ],
    "include": [
        "src/**/*.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

But my VS Code still complains:

Even though it compiles without error or warnings via awesome-typescript-loader.

So what do I have to do to get the language service to behave? What's the best way to configure tsconfig to read all my *.d.ts files?

---

Adding

///<reference path="cssom.d.ts"/>

To the top of the file satisfies both the compiler and the language service, but I really don't want to add these <reference>s everywhere since I'm extending a built-in/global type.

Answer 1

I think you want the "typeRoots" tsconfig compiler option. I think you can solve this by including your file in the typeRoots array

"typeRoots": [
  "src/cssom.d.ts"
]

Or you can simply include a path to a folder in the typeRoots array to include all types in that folder.

Update:

Incidentally, I only know this because the typescript-starter project automatically configures a default typeRoots folder for you and explains how to use it. Very helpful.

Update 2:

I suppose it's worth noting that the typescript documentation specifically says the typeRoots option should include a list of folder paths, so it's possible pointing to a specific *.d.ts file wouldn't work.

Update 3:

As @mpen pointed out, including your own typeRoots will overwrite the default node_modules/@types typeRoot. So you'll want to specifically include that typeRoot as well:

i.e. "typeRoots": ["node_modules/@types", "src/types"]

Answer 2

I think the tsx file shown in the screenshot is not part of the project defined by your tsconfig.json because it isn't referenced by either the files or the files matching the includes. Your "files" should probably be changed to ["src/index.tsx"]; I tested and the extension does make a difference.