将 TypeScript 类型添加到顶级（类似 npm）模块答案

【问题标题】：Add TypeScript typings to a top-level (npm-like) module将 TypeScript 类型添加到顶级（类似 npm）模块
【发布时间】：2017-05-30 20:07:51
【问题描述】：

我正在尝试将类型添加到顶级模块，基本上我想要

import DropDownButton from 'bootstrap-dropdown-button'

输入正确。在typings/bootstrap-dropdown-button/index.d.ts 里面我有以下内容

import {Component} from 'react';

declare module 'bootstrap-dropdown-button' {
    //var DropdownButton: any;
    //export default DropdownButton;

    export default class DropdownButton extends Component<any, any> {}
}

这不起作用。我收到了

的错误

错误 TS2307：找不到模块“bootstrap-dropdown-button”。

但是，如果我删除现有代码并取消注释

var DropdownButton: any;
export default DropdownButton;

然后一切正常，虽然我对这个模块的打字自然是相当弱的。

当我尝试从 react 加载 Component 类型时，我的输入似乎不起作用。反应类型已通过 npm 通过@types/react 加载并且工作正常，否则。

我应该如何调整我的打字代码，以便 bootstrap-dropdown-button 被 TypeScript 识别，并与 React.Component 正确交互。

【问题讨论】：

标签： typescript

【解决方案1】：

为了与 ES 模块式导入/导出以及环境模块和平共处，TypeScript 类型定义文件可能有点奇怪，尤其是在交叉引用它们时。让我们看一下@types/react 中的类型定义，看看发生了什么：

export = React;
export as namespace React;

declare namespace React {

    // a great many things, including:

    interface Component<P, S> extends ComponentLifecycle<P, S> { }
    class Component<P, S> {
        // ...
    }
}

这里的基本情况是 TypeScript namespace 是用 React 的类型定义的，它上面的 export 语句表明在将 react 包作为 ES 模块引用时应该使用命名空间的成员。

这种声明类型的方法的优点是同时支持环境和 ES 模块情况。缺点是在某些情况下如何引用这些类型可能有点不清楚。

这里要记住的关键是，虽然 React 本身是通过 ES 模块公开的（因为你是 importing 它），但它的 types 可以通过模块和通过命名空间。但是由于您正在尝试创建下游类型定义，因此您需要使用 namespace，因为 TypeScript 不会像 ES 模块那样处理类型定义文件（尽管它们指定了要与它们一起使用的类型）。

declare module 'bootstrap-dropdown-button' {
    export default class DropdownButton extends React.Component<any, any> {}
    //                                          ^^^^^^
}

在您的类型定义文件中，只需使用它们的命名空间限定您使用的外部类型，而不是尝试将它们作为模块导入。

【讨论】：