我有一个模块,没有任何打字稿定义,我在我的代码中使用如下:
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.
编写满足代码的模块定义的正确方法是什么?
答案 0 :(得分:2)
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"
]
}
答案 1 :(得分:1)
尝试添加到原始定义中的以下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';
不需要更改。
答案 2 :(得分:0)
<强> main.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> {}
}
答案 3 :(得分:0)
这已被识别为TypeScript中的错误: https://github.com/Microsoft/TypeScript/issues/6656
答案 4 :(得分:-2)
尝试删除声明模块部分并让您的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');
希望这有帮助。