sedwards2009/dojo-typescript-class

An experiment aimed at using TypeScript to create Dojo classes.

dojo-typescript-class

This is an experiment aimed at using TypeScript to create Dojo classes. There have been several attempts by different people already. This attempt aims at making the creation of Dojo classes from TypeScript as comfortable as possible with the minimum of weird code duplication and pitfalls.

The magic is in dojoClass.js and for examples of usage see MyTSDojoBaseClass.ts and MyTSDojoSubclass.ts. The idea is to create classes using the normal TypeScript/ES6 syntax, then to pass that prototype object to Dojo's declare() function to create the Dojo class, and then merge the interesting bits in the Dojo class back into the TypeScript one.

Running the unit tests

There are a couple of steps needed to run the tests for this code.

• Run npn install
• Go to http://dojotoolkit.org/download/ and download the source zip and unzip it under the lib/ directory. (You may have to pop open test.html and adjust the requirejs config.)
• Run npm test
• Go to http://localhost:3000/test.html in a browser to run the tests.

Improvements and more tests are welcome.

-- cheers,

Simon Edwards

[email protected] https://github.com/sedwards2009

dojo-typescript-class's Issues

Almost completely awesome! but...

Hello,

I have been playing around with this technique and agree that it is, in most ways, superior to the one that I had come up with. Only one problem that I see: for templated widgets, I can't find an order that instantiates the widget correctly.

The canonical way to try this would be something like:

///<amd-dependency path="dojo/text!./_templates/template.html" />
/// <reference path="../../typings/dijit.d.ts" />

import dojoClass = require("app/dojoClass");
import _WidgetBase = require("dijit/_WidgetBase");
import _TemplatedMixin = require("dijit/_TemplatedMixin");

var template: string = require("dojo/text!./_templates/RulesView.html");

class Foo extends dijit._WidgetBase {
    templateString: string = template;

    constructor(params?: Object, elem?: HTMLElement) {
        super();
        dojoClass.construct(this, params, elem);
    }
}

dojoClass.create(Foo, [_WidgetBase, _TemplatedMixin]);

export=Foo;

however, this causes the application to try to new up the super (dijit._WidgetBase) and the new widget. This causes Dojo to throw an error since it tries to double instantiate this widget and assign them both the same ID.

If we can find a way around this, then I think it addresses all of the use cases in a much more efficient way. I'll keep working on it and update this issue if I find anything.