CODEWITHSUNDEEP
typescripttypescript1.7
pdeva
pdeva

Reputation: 45491

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?

Upvotes: 3

Views: 2315

Answers (5)

pdeva
pdeva

Reputation: 45491

This has been identified as a bug in TypeScript: https://github.com/Microsoft/TypeScript/issues/6656

Upvotes: 0

mk.
mk.

Reputation: 11710

Try some variation of the following 3 lines added to your original definition:

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

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

Your import * as Switch from 'react-bootstrap-switch'; should not need to be changed.

Upvotes: 1

MartyIX
MartyIX

Reputation: 28646

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> {}
}

Upvotes: 0

SnareChops
SnareChops

Reputation: 13347

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

Upvotes: 2

Amid
Amid

Reputation: 22352

Try to remove declare module part and have your Switch class declaration like this:

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

then import it like this:

import Switch from 'react-bootstrap-switch';

or if you prefer:

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

and

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

EDIT

If you are creating definition only then to fix your error you should import your definition using the syntax like this:

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

Hope this helps.

Upvotes: -2

Related Questions