Question

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

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类型时，我的输入似乎不起作用。反应类型已经通过@types/react通过npm加载，否则可以正常工作。

我应该如何调整输入代码，以便TypeScript识别bootstrap-dropdown-button，并与React.Component正确互动。

Answer 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> {
        // ...
    }
}

这里基本上发生的是使用React的类型定义TypeScript namespace，并在其顶部的export语句指示命名空间＆＃39; s在将react包引用为ES模块时，应使用成员。

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

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

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

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

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

1 个答案: