CODEWITHSUNDEEP
typescript
mpen
mpen

Reputation: 283313

How to properly "declare" a module? (TS7016)

First, here's my tsconfig.json:

{
    "compilerOptions": {
        "strict": true,
        "importHelpers": false,
        "inlineSources": true,
        "noEmitOnError": true,
        "pretty": true,
        "module": "commonjs",
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": false,
        "removeComments": true,
        "preserveConstEnums": false,
        "sourceMap": true,
        "lib": ["es2017","esnext.asynciterable"],
        "skipLibCheck": true,
        "outDir": "dist",
        "target": "es2018",
        "declaration": true,
        "types" : ["node"],
        "resolveJsonModule": true,
        "esModuleInterop": false
    },
    "files": [
        "src/DatabaseWrapper"
    ],
    "exclude": [
        "node_modules"
    ]
}

Now I've tried to import a JavaScript library:

 import Napi from '@org/napi-js';

And I get this error:

TS7016: Could not find a declaration file for module 'napi-js'. '/home/mpen/Projects/my-project/node_modules/@org/napi-js/dist/index.js' implicitly has an 'any' type. Try npm install @types/org__napi-js if it exists or add a new declaration (.d.ts) file containing `declare module 'org__napi-js';

The @types/org__napi-js doesn't exist, so that's no good. So how do I properly declare it?

I've tried creating a file, types/org__napi-js.d.ts' with just this in it:

declare module 'org__napi-js';

And then I tried updating my tsconfig.json so it can find it:

{
    "compilerOptions": {
        ...
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    },
    ...

But that didn't help any.

What am I supposed to do? Or, more explicitly:

  1. How do I tell TypeScript where to find my module?
  2. What's the minimum amount of code that needs to go in this module to just say the default export is any?

I think I want to put all these stubs in types/, and my source in src/ unless there's some standard way to organize a TS project.

Upvotes: 23

Views: 35080

Answers (6)

Md Sami Al Badhon
Md Sami Al Badhon

Reputation: 1

Here's the easiest way to fix that, go to tsconfig.app.json if you're using vite, otherwise go to tsconfig.json. And add this line:

"noImplicitAny": false

Upvotes: 0

Michael Rivera
Michael Rivera

Reputation: 371

This error, TS7016, arrives if you try to import a JavaScript (not typescript) module with a relative specifier (‘./path/to/file.js’) and don’t have allowJs set to true in tsconfig. For example.

Upvotes: 0

Alexxino
Alexxino

Reputation: 883

For libraries without @types/module-name file, I enabled this in my tsconfig.json:

"moduleResolution": "node"

It specifies how Typescript looks up a file from a given module specifier.

If that doesn't work either, you can try adding // @ts-ignore before the import like this:

// @ts-ignore
import Napi from '@org/napi-js'

Upvotes: 3

Bryan Larsen
Bryan Larsen

Reputation: 10026

An alternative to creating an empty declaration is ts-ignore:

// @ts-ignore
import Napi from '@org/napi-js';

Upvotes: 23

rbokel
rbokel

Reputation: 31

I had a similar problem with @google-cloud/some-lib and couldn't get it to work the way explained above.

I ended up with a file in my src directory containing "declare module '@google-cloud/some-lib';" and no specific configuration, eg no paths or basePath configuration. The name of the file does not matter, as long as it ends .d.ts.

Tested with Typescript 3.0.3 and 2.4.2

Took me half day to fix. Thank you Typescript :)

Upvotes: 3

mpen
mpen

Reputation: 283313

OK, so through a lot of trial and error, it turns out TypeScript is lying about wanting a module called org__napi-js, what it really wants is @org/napi-js.

And, if you're unfamiliar with how paths works as I was, TypeScript looks up the file as its needed based on the module name, so the paths must match, and that includes the @org directory.

So, I was on the right track by updating my tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".",
        "paths": {
            "*": ["types/*"]
        }
    },

That says look in the types dir for modules.

Then create the module file, types/@org/napi-js.d.ts. All it needs is:

declare module '@org/napi-js';

Note how it does include the @namespace/.

That's it. Your project should compile now.

Upvotes: 22

Related Questions