tsconfig.json typeroots custom path not picked up

Question

I have some custom .d.ts files and I want tsc to pick up these files when compiling. In order to get this done I modify the tsconfig.file to include the following

"typeRoots": [
      "../node_modules/@types",
      "./app/modules"
    ]

./app/modules is where my custom .d.ts file resides. Inside the ./app/modules folder I have the following file myModule.d.ts

export declare module myModule {
  function Login();
  function Logout();
}

Now inside my other typescript file I have the following import

import { myModule } from 'myModule';

Here I get the following error Cannot find module 'myModule'.

Answer 1

I found the config that fixes this. Note the paths and baseUrl properties:

{
  "version": "2.1.5",
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "removeComments": true,
    "preserveConstEnums": true,
    "inlineSourceMap": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["src/subfolder/node_modules/@types"],
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "*": ["src/subfolder/node_modules/@types/*", "*"]
    }
  },
  "exclude": ["node_modules", "src/subfolder/node_modules"]
}

Answer 2

If you're coming to this issue with the goal of adding a folder containing custom type declarations to your project, try using the "includes" tsconfig option instead of the "typeRoots" option.

For the life of me I couldn't get the typeRoots property to behave as expected, but I found that you can use the includes property instead.

Create a folder to hold your type declarations and instead of adding that folder path to the typeRoots tsconfig option add it to the includes tsconfig option. In my usage, everything then behaves as expected.

{
  "include": ["./src", "./typings"],
}