TypeScript custom declaration files for untyped npm modules

Question

I am consuming a React component called shiitake from npm into my project where I use TypeScript. That library does not have TypeScript declarations so I thought I would write one. The declaration file looks like below (it may not be complete but don't worry about it too much):

import * as React from 'react';

declare module 'shiitake' {

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

I have put this inside ./typings/shiitake.d.ts file and on VS Code, I am seeing the below error:

[ts] Invalid module name in augmentation. Module 'shiitake' resolves to an untyped module at 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js', which cannot be augmented.

On the consumption side, I am still getting the same error even if with the above declaration (since I have noImplicitAny compiler switch turned on):

/// <reference path="../../../../typings/shiitake.d.ts" />
import * as React from 'react';
import Shiitake from 'shiitake';

[ts] Could not find a declaration file for module 'shiitake'. 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' implicitly has an 'any' type.

The standard why of acquiring declaration files for this type of modules is through @types/ way and it works well. However, I cannot get the custom typings work. Any thoughts?

score 147 · Accepted Answer · edited Jul 28 '18 at 02:35

147

The declaration declare module 'shiitake'; should be in a global scope. i.e. a top level declaration in a non module (where a module is a file with at least one top level import or export).

A declaration of the form declare module '...' { } in a module is an augmentation. For more details see Typescript Module Augmentation.

So you want this file to look like:

declare module 'shiitake' {

    import * as React from 'react';

    export interface ShiitakeProps {
        lines: number;
    }

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    }
}

edited Jul 28 '18 at 02:35

joseluisq

459
1
6
17

answered Mar 09 '17 at 17:45

mohamed hegazy

8,073
3
28
21

26

This was a lot of help, thank you. For me, the issue was that the `import` statement was outside of the module as opposed to inside. – dbellizzi Jun 17 '17 at 06:15
5

I wish I could upvote this like ten times. I spent hours on this, yesterday. I really wish the TypeScript docs were better for this. – Benjamin Riggs Sep 08 '17 at 21:05
3

Such a silly problem, and the warnings given are very unclear. VSCode messed this one up for me. – Nate Glenn Jun 24 '19 at 19:02
@dudewad check the username on that post, it looks like at most self-plagiarism (is that banned here?) – Robert Columbia Sep 23 '19 at 19:35
Thanks! My import was outside the module declaration. – silvenon Apr 07 '20 at 20:04

score 5 · Answer 2 · answered Aug 13 '17 at 19:50

5

In my experience, a definition file will fail in this way if it has any exports or imports declared outside the module definition. If you use an IDE with auto-import, be warned!

answered Aug 13 '17 at 19:50

Ed Staub

14,730
3
55
86

score 3 · Answer 3 · answered Jun 23 '17 at 00:41

I had the same problem today.

Turns out I paste exported interfaces outside of the module declaration. The typings file I used as a template had private interfaces at the end of the file.

So my exported interfaces were declared outside of the module declaration. This is drives typescript compiler nuts.

Once I moved the interfaces into the module boundaries everything got fixed.

TypeScript custom declaration files for untyped npm modules

3 Answers3

Linked