Cannot find Dojo dijit/form/xxx inside of TypeScript class

Question

My Problem

I've been very successful creating TypeScript classes that import Dojo classes like array, lang, Deferred, on, dom-construct, and all of that. For the first time, I'm trying to pull some of the dijit stuff. Specifically, dijit/form/HorizontalSlider and dijit/form/VerticalSlider. But, when I compile, I keep getting:

error TS2304: Cannot find name 'HorizontalSlider'

My Code

I've got a project-wide tsd.d.ts that looks like this:

/// <reference path="./dojo/dijit.d.ts" />
/// <reference path="./dojo/dojo.d.ts" />

I'm using the dts from Mayhem, because they are better than the typings at DefinitelyTyped (https://github.com/SitePen/mayhem/tree/master/typings/dojo). Here's the definition for HorizontalSlider:

declare module 'dijit/form/HorizontalSlider' {
    import _FormValueWidget = require('dijit/form/_FormValueWidget');
    interface HorizontalSlider extends _FormValueWidget {
    }
    export = HorizontalSlider;
}

EDIT: to clarify that syntax, based on Ryan Cavanaugh's response, here is the DropDownButton from the same dts:

declare module 'dijit/form/DropDownButton' {
    import Button = require('dijit/form/Button');
    interface DropDownButton extends Button {
    }
    var DropDownButton:{
        new (kwArgs?:Object, srcNodeRef?:HTMLElement):DropDownButton;
    };
    export = DropDownButton;
}

Finally, in my class, things look as they should, like this:

/// <reference path="./../typings/tsd.d.ts" />

import HorizontalSlider = require('dijit/form/HorizontalSlider');

class MyDijit {
    constructor() {
        var foo = new HorizontalSlider(...);
    }
}

And, I get the dreaded TS2304.

What I've Tried

It seems like the compiler can't see the dijit dts. So, I tried adding the dts to the grunt-typescript task.

typescript: {
    build: {
    src: ['src/**/*.ts', 'typings/tsd.d.ts'],
    options: {
        module: 'amd',
        target: 'es3',
        sourceMap: true,
        declaration: false
    }
}

I also tried updating my tsconfig.json

{
    "compilerOptions": {
        "declaration": false,
        "module": "amd",
        "noImplicitAny": true,
        "target": "es3",
        "filesGlob": [
            "./src/**/*.ts",
            "./typings/tsd.d.ts"
        ]
    }
}

That didn't help, either! Lastly, thinking that the compiler was stripping those classes as being unused, I even tried this:

/// <amd-dependency path="dijit/form/HorizontalSlider"/>

And, no luck. So, here I am on Stack Overflow hoping that someday has gotten dijit/form/xxx to compile inside of a TypeScript class. There's one similar SO question, but not quite the same: Typescript cannot find name even though it is referenced

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

declare module 'dijit/form/HorizontalSlider' {
    import _FormValueWidget = require('dijit/form/_FormValueWidget');
    interface HorizontalSlider extends _FormValueWidget {
    }
    export = HorizontalSlider;
}

What you have here is a module that only exports a type (not a value), hence you cannot new it (see "difference between declare class and interface"). It seems likely you want a module that exports a class instead:

declare module 'dijit/form/HorizontalSlider' {
    import _FormValueWidget = require('dijit/form/_FormValueWidget');
    class HorizontalSlider extends _FormValueWidget { // interface -> class
    }
    export = HorizontalSlider;
}

edited May 23 '17 at 12:06

Community

1
1

answered May 11 '15 at 19:31

Ryan Cavanaugh

209,514
56
272
235

Well, that's exactly what I thought, too. But, the guys who made that dts are smart, and know more than me. I think it's done this way because Dojo supports multiple inheritance through "mixins". _FormValueWidget inherits from _WidgetBase, which inherits from three other classes. The only way to do that in TypeScript is through interfaces. – AJ Morris May 11 '15 at 19:59
Ryan: I also updated the original question with a different code sample, and that might help explain what's going on there. – AJ Morris May 11 '15 at 20:05

Cannot find Dojo dijit/form/xxx inside of TypeScript class

1 Answers1