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

Answer 1

在你的package.json你需要将types字段重命名为typings 。是的，这里不需要三重斜杠指令

Answer 2

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

Answer 3

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?