what is the correct way to add type definition for this module

pdeva

I have a module, without any typescript definition, that I use in my code like this:

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


render () {
 return <Switch/>
}

Since react-bootstrap-switch doesnt have a type definition, I am trying to create one for it.

I have tried:

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

    export  = Switch;
}

However this results in the import statement in the original code throwing this error:

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

What is the correct way to write the module definition that satisfies the code on top?

SnareChops

import statements are used for .ts files not for .d.ts files. For those you need to use the ///<reference .../> tags or simple import React = __React; type imports.

Here is what I could come up with using the react.d.ts file and the React Switch source code.

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

    export  = Switch;
}

How you use typescript, and how you write definition files for JS libraries are two completely different things. If this does not work for you then I suppose I could pull down the repos and get it building.

Update

Ok I have a working version

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

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

    export = Switch;
}

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

And before you comment saying that you can't switch the import...

Please read the answer here explaining why. And please run the code. You will see that the JS version of the library still loads as expected and still runs.

I need to credit this post and this definition for their help in this.

My test file for compiling:

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

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

The resulting output:

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

As you can see the output is identical for either import and the build is error free.

And tsconfig.js:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

What is the correct way to customize a Bootstrap theme?

来自分类Dev

module 'ng' has no exported member 'ui' when using ui-router type definition for typescript

来自分类Dev

What type of padding does python use for RSA module?

来自分类Dev

Is this a correct way to use polymorphism

来自分类Dev

Best way to correct bundle ID

来自分类Dev

What is the proper way to add an attribute to a base class in a Python library and have it inherited?

来自分类Dev

struct definition in header file: type defaults to 'int'

来自分类Dev

Correct, portable way to interpret buffer as a struct

来自分类Dev

Correct way to develop generic modifiers in Java

来自分类Dev

使用type =“ module”使javascript入队

来自分类Dev

Correct way of referencing tools.jar in a cross-platform way

来自分类Dev

How to add attribute to Soap Element correct in java

来自分类Dev

What is the correct method for appending to a text file in java?

来自分类Dev

What is the correct stored value for umlaut "ü" in Perl?

来自分类Dev

What is the correct RegEx to extract my substring

来自分类Dev

CMakeLists-add_definition在变量周围添加双引号

来自分类Dev

What is the precise definition of the structure passed to the STAT system call?

来自分类Dev

What is the way to kill an executing procedure?

来自分类Dev

What is the type of quasiquote that matched type parameters?

来自分类Dev

What is the difference between type conversion and type assertion?

来自分类Dev

Using Eigen::Geometry module with custom scalar type

来自分类Dev

undefined 不是对象(评估“module.type”)

来自分类Dev

What is wrong with the .add in my ArrayList?

来自分类Dev

What's the correct syntax to populate a Dictionary having nested Lists as value?

来自分类Dev

What is the best way to iterate an nested object in rails

来自分类Dev

What is the fastest way to compare strings in JavaScript?

来自分类Dev

What is the best way to parse binary protocols with Rust

来自分类Dev

What is the best way to wait for an animation to finish in MVVM?

来自分类Dev

TFS2013 new build definition error: The type or namespace name 'TestClassAttribute' could not be found

Related 相关文章

  1. 1

    What is the correct way to customize a Bootstrap theme?

  2. 2

    module 'ng' has no exported member 'ui' when using ui-router type definition for typescript

  3. 3

    What type of padding does python use for RSA module?

  4. 4

    Is this a correct way to use polymorphism

  5. 5

    Best way to correct bundle ID

  6. 6

    What is the proper way to add an attribute to a base class in a Python library and have it inherited?

  7. 7

    struct definition in header file: type defaults to 'int'

  8. 8

    Correct, portable way to interpret buffer as a struct

  9. 9

    Correct way to develop generic modifiers in Java

  10. 10

    使用type =“ module”使javascript入队

  11. 11

    Correct way of referencing tools.jar in a cross-platform way

  12. 12

    How to add attribute to Soap Element correct in java

  13. 13

    What is the correct method for appending to a text file in java?

  14. 14

    What is the correct stored value for umlaut "ü" in Perl?

  15. 15

    What is the correct RegEx to extract my substring

  16. 16

    CMakeLists-add_definition在变量周围添加双引号

  17. 17

    What is the precise definition of the structure passed to the STAT system call?

  18. 18

    What is the way to kill an executing procedure?

  19. 19

    What is the type of quasiquote that matched type parameters?

  20. 20

    What is the difference between type conversion and type assertion?

  21. 21

    Using Eigen::Geometry module with custom scalar type

  22. 22

    undefined 不是对象(评估“module.type”)

  23. 23

    What is wrong with the .add in my ArrayList?

  24. 24

    What's the correct syntax to populate a Dictionary having nested Lists as value?

  25. 25

    What is the best way to iterate an nested object in rails

  26. 26

    What is the fastest way to compare strings in JavaScript?

  27. 27

    What is the best way to parse binary protocols with Rust

  28. 28

    What is the best way to wait for an animation to finish in MVVM?

  29. 29

    TFS2013 new build definition error: The type or namespace name 'TestClassAttribute' could not be found

热门标签

归档