How to get VScode recognize d.ts files without referencing them directly

Question

I have a project created with create-react-app-ts

I also have a set of d.ts files that are generated interfaces from JSON-schema. They define some interfaces for a remote API.

I would like these d.ts file to be "globally" available throughout the project, without the need to directly reference them by file name. Somewhat similar to how Promise<T> definition is available globally.

I've tried modifying tsconfig, added path/to/**/*.dts to include, as well as in files. I also tried adding path to "typeRoots" under compilerOptopns.

This makes the project compile, but VSCode provides no IntelliSense to these interfaces, and underlines them as unknown.

Answer 1

If TypeScript compiles without errors, but VSCode still can't recognize global types and add proper intellisense, then it's likely that you have a project with too many files and you are not being specific enough about the files you want TypeScript to check.

To add intellisense to global types, VSCode iterates over all files available, since you did not specify which ones to check, or was too broad about it. With too many files, VSCode stops looking around.

Using typeRoots to declare your global types folder/files should be enough for VSCode to spot what files it should look for. If it doesn't happen, consider specifying all the paths you expect intellisense to work in the include field, or remove all the files you don't want in the exclude field. VSCode should follow and add intellisense to the missing files.

{
  "compilerOptions": {
    "typeRoots": [
      "path/to/**/*.d.ts"
    ],
    "include": [
      // Add all paths you want intellisense to work
      "path/to/where/you/expect/intellisense/to/work",
      "path/to/another/file/or/folder"
    ]
  }
}

Answer 2

Based on tsconfig compiler options, you should use option typeRoots. This section of documentation describes the difference between @types, typeRoots and types.

For your specific case this tsconfig.json file should do the trick:

{
    "compilerOptions": {
        "typeRoots" : ["./type-definitions-folder"]
    }
}

If you are also using type definitions from npm you should also add ./node_modules/@types.

{
    "compilerOptions": {
        "typeRoots" : ["./node_modules/@types", "./type-definitions-folder"]
    }
}