Typescript does not resolve definition file for npm package

Question

I just published a npm package written in typescript. Currently I have a lot of trouble getting the definition recognized by typescript (webback and vscode). The only solution that worked so far was to create a folder with the definition in node_modules/@types

Briefly this is my package setup:

tsconfig.json

{
    "compilerOptions": {
        ...
        "outDir": "./lib/",
        "declaration": true,
        "declarationDir": "./src/",
    }
}

package.json

{
    ...
    "types": "./index.d.ts",
}

index.d.ts

/// <reference path="src/nano-data-binding.d.ts" />

src/nano-data-binding.d.ts

I keep it in /src because it's autogenerated and I cannot control the path of the import. Also if I try to use only declare var ... without import export statements to get a script instead of a module.

import { StringOrHTMLElement } from './interfaces/nano-data-binding';
export declare function nanoBind(parent: HTMLElement, ...selectors: StringOrHTMLElement[]): HTMLElement[];
export declare function nanoBindAll(parent: HTMLElement, ...selectors: string[]): HTMLElement[];

Feel free to install the package, maybe it is just a small mistake somewhere. Basically I want to get the nanoBind() and nanoBindAll() declared as globals.

Edit

Additional things I tried. Nothing works.

package.json - Npm package

{
    ...
    "types": "lib/nano-data-binding.d.ts",
    "typings": "lib/nano-data-binding.d.ts",
    "typescript": {
        "definition": "lib/nano-data-binding.d.ts"
    },
}

tsconfig.json - Local project

{
    ...
    "files": [
        "node_modules/nano-data-binding/lib/nano-data-binding.d.ts"
    ]
}

Have you distributed the typing files in your package? You also don't need the redirection (using index.d.ts and use /// <ref). Just point to the actual typing files from package.json directly. — unional
– unional, Commented Dec 27, 2017 at 1:54
BTW, /// <reference is for global script files, as a package, you would not use that syntax. Just import '...'. — unional
– unional, Commented Dec 27, 2017 at 1:55
I have tried all these suggestions before posting, I was pointing to the actual file. I also tried using typings. And various other things. It just refuses to register as a definition. The definition is definitely in the package. — Adrian Moisa
– Adrian Moisa, Commented Dec 27, 2017 at 8:55
I've been looking at other packages trying to figure out if I deed something wrong. Nothing stands out. Is there a way to confirm that an interface is loaded, other than just waiting for the error? — Adrian Moisa
– Adrian Moisa, Commented Dec 27, 2017 at 9:01
Can you show how the nano-data-binding.d.ts looks like? It should be automatic, you don't have to do anything except types/typings: ... in your package.json. See any of my packages for example. e.g. color-map — unional
– unional, Commented Dec 27, 2017 at 12:00

Daniel Khoroshko · Accepted Answer · 2017-12-27 02:22:33Z

2

In your package.json you need to rename the types field to typings And yes, triple slash directive is not needed here

answered Dec 27, 2017 at 2:22

Daniel Khoroshko

2,7391 gold badge20 silver badges28 bronze badges

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

2 Comments

Adrian Moisa Over a year ago

I used the triple slash in order to be able to add more definitions, indeed it's not really needed. Before posting I tried pointing directly to the folder and to the root index.d.ts where the actual definition was located.

brettinternet Over a year ago

"types" and "typings" are synonymous typescriptlang.org/docs/handbook/declaration-files/…

Adrian Moisa · Accepted Answer · 2017-12-27 13:30:40Z

1

Finally found something that works. It looks like it's enough to use index.d.ts in the root level or specify a custom route in package.json of the package.

The problem was with my definition. It needs to declare a module.

index.d.ts

type StringOrHTMLElement = string | HTMLElement
declare var nanoBind: (parent: HTMLElement, ...selectors: StringOrHTMLElement[]) => HTMLElement[];
declare var nanoBindAll: (parent: HTMLElement, ...selectors: string[]) => HTMLElement[];

declare module 'nano-data-binding' {
    export var nanoBind: (parent: HTMLElement, ...selectors: any[]) => HTMLElement[];
    export var nanoBindAll: (parent: HTMLElement, ...selectors: string[]) => HTMLElement[];
}

And than the way it is imported

main.ts

import * as ndb from 'nano-data-binding' // Imports script and definition
require('nano-data-binding') // Ignores definition

answered Dec 27, 2017 at 13:30

Adrian Moisa

4,4837 gold badges46 silver badges72 bronze badges

3 Comments

unional Over a year ago

This is not the way. So I know what’s your problem. Will post an answer

Daniel Khoroshko Over a year ago

This is a way of augmenting someone elses type defs.. I've posted an answer above.. types -> typings in package.json

Adrian Moisa Over a year ago

I found globals.d.ts in the typescript documentation. Maybe I got it the wrong way. Says that namespace is for globals, which is my case.

unional · Accepted Answer · 2017-12-27 18:30:34Z

1

The problem you have is due to your tsconfig.json tries to explicitly include the typing file. npm package typings file are loaded automatically when you specify either types or typings field in your package.json.

When you remove the entry in your files array in your tsconfig.json, it should just work.

The solution you found (adding declare module 'nano-data-binding' { }) is a solution for creating custom typings for some packages without typings.

To be a bit more technical, when a typings file (d.ts) does not contain top-level import export statement, it is an ambient script file and it is globally scoped. That's why you need declare module '...' to indicate which module your are adding typings for.

You typically use them as in How to consume the Moment.js TypeScript definition file if my site is already using moment.min.js?

edited Dec 27, 2017 at 18:30

answered Dec 27, 2017 at 18:25

unional

15.8k6 gold badges36 silver badges57 bronze badges

1 Comment

Adrian Moisa Over a year ago

The trouble is that I have removed the files option from tsconfig.json some time ago. A lot of the tests I made were running without this option. I will keep looking into it. I hope I will find the real trouble maker. Maybe I should try to import it in a clean project. Maybe something interferes. I will be doing some tests and report back on the results.Thank you for the answer!

Collectives™ on Stack Overflow

Typescript does not resolve definition file for npm package

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related