hottowel (durandal) + typescript

Question

this is my first post, so wish me luck :)

I want to use hot towel(durandal) + typescript , i followed these threads: - how-can-i-use-a-class-for-my-shell-viewmodel-in-durandal - how-to-use-fancybox-in-combination-with-durandal-en-typescript - incorrect-this-in-select

and also tried DurandalTypescriptExample sample

this sample does not run with this error:

"Server Error in '/' Application.

The resource cannot be found. "

at first i decided just to change my viewmodels with typescript, and after that shell either, but in both situation i got this error:

this is my shell.ts code (which i used from this sample) :

/// <reference path="../durandal/durandal.d.ts" />

import _router = module('durandal/plugins/router');
import app = module('durandal/app');

export var router = _router;

export function search() {
    app.showMessage('Search not yet implemented...');
}
export function activate() {
    return router.activate('welcome');
}

and i got this error:

- JavaScript runtime error: 'exports' is undefined

any idea?

and if its possible, workable solutions are appreciated.

thanx guys let's see what will happen.

Answer 1

I had the same problem with the DurandalTypescriptExample. However the code in this project demonstrated how you can implement your typescript code in the viewmodel file, if you only make sure to dispose publicly the durandal requied variables. At least the activate function and the title variable.

See the code example below:

/// <reference path="../../dts/knockout/knockout.d.ts" //>
export class ViewModel {
    title: string =  'Home View';
    MyTitle: KnockoutObservableString; //MyTitle can be referenced in home.html as vm.MyTitle
    public activate() {
         this.MyTitle = ko.observable(this.title + " with my ko title");
         return true;
    }
}

export var vm = new ViewModel();
//The Durandal plugin-interface variables
export var title = vm.title;
export var activate = function () { return vm.activate(); };

Since I found no ready made project to demonstrate this I had to make my own. See my version of the Hot Towel project on github:

https://github.com/Svakinn/TypeTowel

Answer 2

If you export something in global scope you are in external module land and you need a third party library to manage your modules.

I recommend you use RequireJS. Basically the following typescript:

export function f(){
}

generates the following js:

function f() {
}
exports.f = f;

exports is a variable defined by a third party module loader. If you do not have such a module loader then exports is undefined. The tutorial of mine explains it further.