Typescript 无法解析 npm 包的定义文件

Question

我刚刚发布了一个用 typescript 编写的 npm package。目前，我很难获得打字稿（webback 和 vscode）识别的定义。到目前为止唯一有效的解决方案是创建一个文件夹，其定义在 node_modules/@types

简而言之，这是我的包设置：

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

我将它保存在 /src 中，因为它是自动生成的，我无法控制导入的路径。此外，如果我尝试仅使用 declare var ... 而不使用 import export 语句来获取脚本而不是模块。

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[];

请随意安装包，也许只是某个地方的一个小错误。基本上我想将nanoBind() 和nanoBindAll() 声明为全局变量。

编辑

我尝试过的其他东西。没有任何效果。

package.json - Npm 包

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

tsconfig.json - 本地项目

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

Answer 1

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

Answer 2

终于找到了有用的东西。看起来在根级别使用index.d.ts 或者在包的package.json 中指定自定义路由就足够了。

问题出在我的定义上。它需要声明一个模块。

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[];
}

比它的导入方式

ma​​in.ts

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

Answer 3

您遇到的问题是由于您的 tsconfig.json 尝试显式包含输入文件。 当您在 package.json 中指定 types 或 typings 字段时，npm 包类型文件会自动加载。

当您在 tsconfig.json 中删除 files 数组中的条目时，它应该可以正常工作。

您找到的解决方案（添加declare module 'nano-data-binding' { }）是为某些无需分型的包创建自定义分型的解决方案。

从技术角度来说，当一个类型文件 (d.ts) 不包含顶级 import export 语句时，它是一个环境脚本文件，它是全局范围的。这就是为什么您需要declare module '...' 来指明您要为哪个模块添加类型。

你通常像How to consume the Moment.js TypeScript definition file if my site is already using moment.min.js?那样使用它们