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

Question

我有一个没有任何打字稿定义的模块，我在我的代码中使用如下：

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"
    ]
}

Answer 2

尝试将以下 3 行添加到原始定义中：

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

    namespace Switch {}
    var s: Switch;
    export = Switch;
}

您的import * as Switch from 'react-bootstrap-switch'; 不需要更改。

Answer 3

ma​​in.tsx

/// <reference path="./typings/react/react.d.ts" />
/// <reference path="./switch.d.ts" />
import React = __React;
import * as Switch from 'react-bootstrap-switch';


var HelloMessage = React.createClass({
    render: function() {
        return <Switch.Component name="test" />
    }
});

switch.d.ts

///<reference path="./typings/react/react.d.ts"/>
declare module 'react-bootstrap-switch'
{
    import React = require("react");

    export class Component extends React.Component<any, any> {}
}

Answer 4

这已被确定为 TypeScript 中的错误： https://github.com/Microsoft/TypeScript/issues/6656

Answer 5

尝试删除声明模块部分并让您的 Switch 类声明如下：

import React = require("react");
export default class Switch extends React.Component<{onColor?:string},{} >
{}

然后像这样导入它：

import Switch from 'react-bootstrap-switch';

或者如果您愿意：

import React = require("react");
export class Switch extends React.Component<{onColor?:string},{} >
{}

和

import {Switch} from 'react-bootstrap-switch';

编辑

如果您创建定义只是为了修复您的错误，您应该使用如下语法导入您的定义：

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

希望这会有所帮助。