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.
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