CODEWITHSUNDEEP
typescripttypescript-typings
Rogach
Rogach

Reputation: 27190

Where should I place custom .d.ts files?

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?

Upvotes: 88

Views: 93842

Answers (4)

Malvineous
Malvineous

Reputation: 27300

For me I had this in my tsconfig.json already:

{
  ...
  "include": [
    "src",
    "test"
  ]
}

With all my code in the src/ folder. If I had src/example.ts with import x from '@abc/def'; then I could put the .d.ts file as src/@types/@abc/def/index.d.ts and this was picked up without any changes to the TS config files.

So it seems you must put the index.d.ts file inside a particular path that starts with @types and includes the package namespace and name, and this must be placed within a folder that TypeScript is already looking at for source files.

Upvotes: 6

taprotec
taprotec

Reputation: 59

There is a lot of packages that are not typescript packages, so to fix this error just change compilerOptions.strict to false in tsconfig

Upvotes: -7

Ville
Ville

Reputation: 1335

Use paths instead of typeRoots

"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.

Upvotes: 30

Rogach
Rogach

Reputation: 27190

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.

Upvotes: 12

Related Questions