Equivalent of JavaScript in TypeScript

Question

Currently I am working on Durandal 2.0 project. Initially I was using this JavaScript code to execute my shell.js(ViewModel), which is working perfectly fine.

Initial JavaScript Code (working one)

    define(['plugins/router', 'durandal/app'], function (router, app) {

    return {
        router: router,
        search: function() {
            app.showMessage('Search not yet implemented...');
        },
        activate: function () {
            router.map([
                { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
        ]).buildNavigationModel();
        
            return router.activate();
        }
    };
    });

Now I am trying to use typescript. So I wrote this code(below one), which is not working Typescript Code:

    /// <reference path="../../Scripts/typescripts/jquery/jquery.d.ts" />
    /// <reference path="../../Scripts/typescripts/knockout/knockout.d.ts" />
    /// <reference path="../../Scripts/typescripts/durandal/durandal.d.ts" />

    import _config = require('config');
    import _router = require('plugins/router');
    import _app = require('durandal/app');

    class shell {
    //config = new _config.Config();
    app = _app;
    router = _router;

    activate() {
      this.router.map([
            { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
            { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
             ]).buildNavigationModel();
          return this.router.activate();
        }
    }

Output of typescript: JavaScript code generated by TypeScript(Not Working)

    /// <reference path="../../Scripts/typescripts/jquery/jquery.d.ts" />
    /// <reference path="../../Scripts/typescripts/knockout/knockout.d.ts" />
    /// <reference path="../../Scripts/typescripts/durandal/durandal.d.ts" />
    define(["require", "exports", 'plugins/router', 'durandal/app'], function(require, exports, ___router__, ___app__) {

    var _router = ___router__;
    var _app = ___app__;

    var shell = (function () {
        function shell() {
            //config = new _config.Config();
            this.app = _app;
            this.router = _router;
        }
        shell.prototype.activate = function () {
            this.router.map([
                { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
        ]).buildNavigationModel();
            return this.router.activate();
        };
        return shell;
      })();
    });

Can anyone suggest me what is the issue?? the error I am getting is this,

Unable to parse bindings.

Bindings value: attr: { href: router.navigationModel()[0].hash }

Message: router is not defined;

View: views/shell;

ModuleId: viewmodels/shell

What errors are you getting during compilation, and what version of Typescript are you using? — Games Brainiac
You aren't returning the shell from the module, only from the constructor. — Kyeotic

Jaben Jaben · Accepted Answer · 2013-08-22T15:50:18

Durandal expects an instance of the object to be returned from the module. Typescript's AMD convention is export constructor. Discussion about this problem and plugin solution here: https://github.com/BlueSpire/Durandal/pull/244

I've created Durandal v2.0 plugin to help solve the problem:

https://gist.github.com/Jaben/6180861

It will find the exported class for the view and use that if it's available.

You will also need to mark the "shell" class as export in TypeScript:

import _config = require('config');
import _router = require('plugins/router');
import _app = require('durandal/app');

export class shell {
    //....
}

Equivalent of JavaScript in TypeScript

2 Answers