Where should I place custom .d.ts files?

Question

I'm trying to provide typings for the package that does not have them:

error TS7016: Could not find a declaration file for module 'inputmask-core'. './node_modules/inputmask-core/lib/index.js' implicitly has an 'any' type. Try `npm install @types/inputmask-core` if it exists or add a new declaration (.d.ts) file containing `declare module 'inputmask-core';` 

I'm using ts-loader in webpack with typescript 2.4.2, and I have the following type roots set up in tsconfig.json:

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

I tried to mimic the package structure in node_modules/@types:

src/client/types |--inputmask-core   |--index.d.ts 

With the following in index.d.ts:

declare class InputMask {} export default InputMask; 

But the error is still there. What am I doing wrong? Where should I place those custom .d.ts files?

And what is the difference between node_modules/@types and any other type root? Why does TypeScript treat them differently?

Answer 1

Use paths instead of typeRoots

• https://github.com/Microsoft/TypeScript/issues/22217#issuecomment-369783776
• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

"typeRoots" is meant for global code. i.e. something that is declared in the global namespace, and you want to include it. For modules, they have their own scope, all you need is path mapping.. something like:

{     "compilerOptions": {         "target": "es2017",         "baseUrl": "./",         "paths": {             "*": [ "src/client/@custom_types/*"]         }     },     "exclude": [ "node_modules", "src/client/@custom_types", ... ] } 

Note: baseUrl is required with paths, and you probably also want to add the dir to exclude.

Answer 2

Possible solution: place the following in index.d.ts, and it will compile:

declare module "inputmask-core" {     declare class InputMask {}     export default InputMask; } 

I still don't understand the special handling that node_modules/@types gets, though.