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

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?

Solution

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