Manually add TypeScript typings for npm utility

Question

I'm setting up TypeScript in an existing JS project, and I'm trying to figure out how to add typings to an untyped npm module, since I know it'll come up.

This line

import X from 'foo';

errors out with Cannot find module 'foo'

In typings/modules I have a foo folder with an index.d.ts file therein with

declare module foo {
    export default class XXX{

    }
}

In the parent typings/index.d.ts I've added

/// <reference path="modules/foo/index.d.ts" />

But still nothing.

My tsconfig.json file looks like this

{
    "compilerOptions": {
        "target": "esnext",
        "baseUrl": "./src",
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "moduleResolution": "node",
        "module": "es2015",
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "typeRoots" : ["./typings/modules", "./node_modules/@types"]
    },
    "include": [
        "./src/**/*.ts",
        "./src/**/*.tsx"
    ]
}

Saravana · Accepted Answer · 2017-05-26 16:38:19Z

2

You have to declare your module with quotes:

declare module "foo" {
    export default class XXX{

    }
}

Seems crazy? Modules declared without quotes are actually similar to namespaces. So you are not actually declaring a module in your code.

From the documentation:

“Internal modules” are now “namespaces”. “External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that module X { is equivalent to the now-preferred namespace X {).

Also see: What's the difference between declaring a module in TypeScript with quotes vs without?

answered May 26, 2017 at 16:38

Saravana

41k20 gold badges110 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Rackis Over a year ago

plus one thanks. Will test as soon as I'm not afk and accept.

Collectives™ on Stack Overflow

Manually add TypeScript typings for npm utility

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related