typescript - 为此模块添加类型定义的正确方法是什么

Question

我有一个没有任何 typescript 定义的模块，我在我的代码中这样使用它:

import * as Switch from 'react-bootstrap-switch';


render () {
 return <Switch/>
}

因为 react-bootstrap-switch 没有类型定义，我正在尝试为它创建一个。

我试过:

declare module 'react-bootstrap-switch'
{
    import React = require("react");
    class Switch extends React.Component<{onColor?:string},{} >
    {}

    export  = Switch;
}

然而，这会导致原始代码中的 import 语句抛出此错误:

error TS2497: Module ''react-bootstrap-switch'' resolves to a non-module entity and cannot be imported using this construct.

编写满足上面代码的模块定义的正确方法是什么？

Answer 1

import语句用于 .ts文件不适用于 .d.ts文件。对于那些你需要使用 ///<reference .../>标签或简单 import React = __React;类型导入。

这是我可以使用 react.d.ts 得到的结果文件和 React Switch源代码。

///<reference path="../react/react.d.ts"/>
declare module 'react-bootstrap-switch'
{
    function Switch(): __React.ClassicComponentClass;

    export  = Switch;
}

你怎么用typescript，和你怎么写JS库的定义文件，是完全不同的两件事。如果这对您不起作用，那么我想我可以撤下存储库并进行构建。

更新

好的，我有一个工作版本

declare module 'react-bootstrap-switch'{
    interface SwitchProps{
        onColor?: string
    }

    class Switch extends __React.Component<SwitchProps, {}>{}

    export = Switch;
}

用法 import Switch = require('react-bootstrap-switch');

在你评论说你不能切换导入之前......

请阅读答案here解释原因。请运行代码。您会看到库的 JS 版本仍按预期加载并运行。

我需要信用this post和 this definition感谢他们在这方面的帮助。

我的编译测试文件:

import * as React from 'react';
import Switch = require('react-bootstrap-switch');

var b = <div></div>;
var a = <Switch/>;

结果输出:

var React = require('react');
var Switch = require('react-bootstrap-switch');
var b = React.createElement("div", null);
var a = React.createElement(Switch, null);

如您所见，两种导入的输出都是相同的，并且构建没有错误。

和 tsconfig.js:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es3",
        "noImplicitAny": false,
        "outDir": "built",
        "rootDir": ".",
        "sourceMap": false,
        "moduleResolution": "node",
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}