CODEWITHSUNDEEP
typescript
Adam Rackis
Adam Rackis

Reputation: 83366

Manually add TypeScript typings for npm utility

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"
    ]
}

Upvotes: 2

Views: 573

Answers (1)

Saravana
Saravana

Reputation: 40672

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?

Upvotes: 2

Related Questions