durandal typescript bootloader

Question

I would like to create some wrapper around durandal using typescript to make easy to create new SPA apps easy for my development team.

Let me shortly describe the way i would like to structure my wrapper; there would be initial bootstrap class and configuration which developer needs to configure to set up new application. here is what i could achieve for now.

appcore.d.ts

declare module 'system/App'
{
    var appcore: SpaApp;
    export = appcore;
}

interface SpaApp {
    isInDebugMode: boolean;
    InitRoute: InitialRoute;
    AppTitle: KnockoutObservable<string>;
    Init: () => void;
}
interface InitialRoute {
    Viewmodel: string;
    animationMode: string;
}

app.ts

import app = require('durandal/app');
import viewlocator = require('durandal/viewLocator');
import system = require('durandal/system');

class Bootloader implements SpaApp
{
    isInDebugMode: boolean;
    InitRoute: InitialRoute;

    AppTitle: KnockoutObservable<string>;

    Init: () => void;

    constructor(title: string)
    {
        this.AppTitle = ko.observable<string>();
        this.InitRoute = { Viewmodel: 'dsasda', animationMode: 'entrance' };
        this.Init = this.initapp;
    }

    private initapp()
    {
        system.debug(this.isInDebugMode);
        app.title = this.AppTitle();
        app.configurePlugins({
            router: true,
            dialog: true,
            widget: true
        });

        app.start().then(() => {
            viewlocator.useConvention();
            app.setRoot(this.InitRoute.Viewmodel, this.InitRoute.animationMode);
        });
    }
}

export = Bootloader;

this all compiles well and app.ts is compiled as an AMD module, but the real problem begins when i tried to create main enty point for my application

main.ts

requirejs.config({
    paths: {
        'text': '../Libs/text',
        'durandal': '../Libs/durandal',
        'plugins': '../Libs/durandal/plugins',
        'transitions': '../Libs/durandal/transitions',
        'knockout': '../Libs/knockout'
    }
});

var apphost = require('system/App');

after typing apphost. i do not see any intellisence for my apphost. what I would like to achieve is to have main.ts in this way.

requirejs.config({
    paths: {
        'text': '../Libs/text',
        'durandal': '../Libs/durandal',
        'plugins': '../Libs/durandal/plugins',
        'transitions': '../Libs/durandal/transitions',
        'knockout': '../Libs/knockout'
    }
});

var apphost = require('system/App');

apphost.AppTitle('my sample SPA app');
apphost.isInDebugMode = true;
apphost.InitRoute = {
    Viewmodel: 'viewmodels/shell',
    animationMode: 'entrance'
};

apphost.Init();

and compiled to main.js so requirejs could load my application.

my question is: what I am doing wrong and why can not I see all the properties and Init method after I type apphost.

Answer 1

If you want intellisense / typesafety after a require call you need to use the import foo = require('filename') syntax.

so,

import apphost = require('system/App');

These are known and external modules in typescript and you need to compile your code with the --module compiler flag.

PS: I have a video on the subject http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1