错误 TS2306：“...index.d.ts”不是模块

Question

我正在尝试用 Typescript 编写一个库，我想在各种其他 Typescript 或 JS 项目中使用它。所有其他项目都在浏览器中运行。

我的 Typescript lib 项目有多个文件，每个文件都是一个具有 1 个类和 1-2 个接口的 React 组件（Component + Props + State，对于熟悉 React 的人来说）。

我希望我的组件库可以作为 AMD 模块被其他项目导入，并且我希望将所有已编译的 JS 代码捆绑在一个文件中，作为库构建过程的一部分。

到目前为止，我已经成功设置了所有内容，以便我的库可以编译。我已经使用以下选项设置了编译器：

jsx: "react", declaration: true, module: "amd"

为库生成的代码如下所示：

define("epb-widget/WidgetItemNav", ["require", "exports", "react"], function (require, exports, React) {
    "use strict";
    exports.WidgetItemNav = ...;
});
define("epb-widget/WidgetItemInfo", ["require", "exports", "react"], function (require, exports, React) {
    "use strict";
    exports.WidgetItemInfo = ...;
});
define("epb-widget/WidgetItem", ["require", "exports", "react", "epb-widget/WidgetItemNav", "epb-widget/WidgetItemInfo"], function (require, exports, React, WidgetItemNav_1, WidgetItemInfo_1) {
    "use strict";
    exports.WidgetItem = ...;
});
define("epb-widget/WidgetOptions", ["require", "exports", "react"], function (require, exports, React) {
    "use strict";
    exports.WidgetOptions = ...;
});
define("epb-widget/Widget", ["require", "exports", "react", "epb-widget/WidgetItem", "epb-widget/WidgetOptions"], function (require, exports, React, WidgetItem_1, WidgetOptions_1) {
    "use strict";
    exports.Widget = ...;
});
define("epb-widget", ["require", "exports", "epb-widget/Widget", "epb-widget/WidgetItem", "epb-widget/WidgetItemInfo", "epb-widget/WidgetItemNav", "epb-widget/WidgetOptions"], function (require, exports, Widget_1, WidgetItem_2, WidgetItemInfo_2, WidgetItemNav_2, WidgetOptions_2) {
    "use strict";
    exports.Widget = Widget_1.Widget;
    exports.WidgetItem = WidgetItem_2.WidgetItem;
    exports.WidgetItemInfo = WidgetItemInfo_2.WidgetItemInfo;
    exports.WidgetItemNav = WidgetItemNav_2.WidgetItemNav;
    exports.WidgetOptions = WidgetOptions_2.WidgetOptions;
});

对于我来说，AMD 模块有很多，但我可以接受。生成的代码看起来效果很好。

生成的

.d.ts

文件如下所示：

declare module "epb-widget/WidgetItemNav" {
    import * as React from "react";
    export interface WidgetItemNavProps {
        ...
    }
    export class WidgetItemNav extends React.Component<WidgetItemNavProps, void> {
        ...
    }
}
declare module "epb-widget/WidgetItemInfo" {
    export interface WidgetItemInfoProps {
        ...
    }
    export const WidgetItemInfo: (props: WidgetItemInfoProps) => JSX.Element;
}
declare module "epb-widget/WidgetItem" {
    export interface WidgetItemProps {
        ...
    }
    export const WidgetItem: (props: WidgetItemProps) => JSX.Element;
}
declare module "epb-widget/WidgetOptions" {
    import * as React from "react";
    export interface WidgetOptionsProps {
        ...
    }
    export interface WidgetOptionsState {
        ...
    }
    export class WidgetOptions extends React.Component<WidgetOptionsProps, WidgetOptionsState> {
        ...
    }
}
declare module "epb-widget/Widget" {
    import * as React from "react";
    import { WidgetItemProps } from "epb-widget/WidgetItem";
    export interface WidgetProps {
        ...
    }
    export interface WidgetState {
        ...
    }
    export class Widget extends React.Component<WidgetProps, WidgetState> {
        ...
    }
}
declare module "epb-widget" {
    export { Widget, WidgetProps } from "epb-widget/Widget";
    export { WidgetItem, WidgetItemProps } from "epb-widget/WidgetItem";
    export { WidgetItemInfo, WidgetItemInfoProps } from "epb-widget/WidgetItemInfo";
    export { WidgetItemNav, WidgetItemNavProps } from "epb-widget/WidgetItemNav";
    export { WidgetOptions, WidgetOptionsProps } from "epb-widget/WidgetOptions";
}

这看起来又很合理。这都是 Typescript 编译器直接输出的。

最后，这个库是一个 npm 模块，它的

package.json

看起来像这样

{
  "name": "epb-widget",
  "version": "1.0.0",
  "description": "...",
  "main": "./dist/index.js",
  "typings": "./dist/index",
  "globalDependencies": {...},
  "devDependencies": {...}
}

但是问题来了

当我尝试在我的一个项目中使用该库时，它实际上不起作用。

我只是尝试像这样导入类：

import {Widget, WidgetProps, WidgetItem} from "epb-widget";

但是打字稿编译器抛出以下错误

 error TS2656: Exported external package typings file '.../node_modules/epb-widget/dist/index.d.ts' is not a module. Please contact the package author to update the package definition.

老实说，我不知道我应该在这里做什么。

index.d.ts

是由

tsc

生成的，我不确定为什么同样的

tsc

无法在另一个项目中使用它。

Answer 1

上面的讨论太长了，但这是我创建库的 TL;DR：

• 创建一个

  index.ts

  来重新导出库中公开的定义，例如

  export * from './API'
  export * from './Decorators'
  ...
  

• 使用

  --declaration

  标志编译库文件以自动生成类型

• 向

  typings

  添加一个

  package.json

  条目，指向生成的

  index.d.ts

  文件

使用图书馆：

• 像其他库一样将其放入

  node_modules

  文件夹中
• 简单地

  import * as mylib from 'mylib'

  ：它将自动导入所有导出的定义和打字

这个过程与

commonjs

配合得很好，据我所知，与

systemjs

也配合得很好。我不知道

amd

，你生成的类型看起来与我的完全不同：

生成的

index.d.ts

通常看起来像

export * from './API';
export * from './Decorators';
...

并且

API.d.ts

文件通常看起来像

import * as stream from 'stream';
import * as net from 'net';
import * as url from 'url';
export interface Factory {
    end(): Promise<void>;
}
export interface ChannelFactory extends Factory {
    getChannel(name: string, closeListener?: () => void): Promise<Channel>;
    existsChannel(name: string): Promise<boolean>;
}
....

Answer 2

您可以使用

ctrl + shift + P

并重新加载窗口。它对我有用

Answer 3

在 tsconfig.json 的选项中添加 "moduleResolution": "node"