I am trying to setup a modular structure for my typescript project. I want to structure it so that i can have modules in different folders and have every class that belongs to that module in seperate files. I am working on a module that is going to serve as a viewmodule for all of my pages. The module has a baseviewmodel which contains generic pageview functions and a pageviewmodel that is used in combination with knockout to render my page.
The structure i want to achieve looks like this:
- ts folder
ViewModule
- BaseViewModel.ts
- PageViewModel.ts (extends BaseViewModel)
- init.ts
BaseViewmodel and PageviewModel both belong to the ViewModule but are seperate files.
module ViewModule {
export class BaseViewmodel {
// ....
}
}
module ViewModule {
export class PageViewModel extends BaseViewmodel {
public content: KnockoutObservable<string>;
constructor(ko: KnockoutStatic) {
super(ko);
this.content = this.ko.observable('');
}
}
}
i use init.ts to initialize my app and inject the dependencies with requirejs:
define(['app/ViewModule/PageViewModel'],
(viewModule: typeof ViewModule.PageViewModel) => {
console.log(viewModule);
});
As you can see i am trying to load the pageviewmodel module with 'app/ViewModule/PageViewModel'. The problem i am facing is that var viewModule is always undefined and the console gives me back the following error:
Uncaught TypeError: Cannot read property 'prototype' of undefined on pageviewmodel.js line 4
the compiled pageviewmodel (which is giving the error) looks like this:
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype; // uncaught TypeError: Cannot read property 'prototype' of undefined
d.prototype = new __();
};
var ViewModule;
(function (ViewModule) {
var PageViewModel = (function (_super) {
__extends(PageViewModel, _super);
function PageViewModel(ko) {
_super.call(this, ko);
this.content = this.ko.observable('');
}
return PageViewModel;
})(ViewModule.BaseViewmodel);
ViewModule.PageViewModel = PageViewModel;
})(ViewModule || (ViewModule = {}));
//# sourceMappingURL=PageViewModel.js.map
I feel like i am trying to do something that is not possible in typescript but im not sure what i'm missing. I would really like to use seperate files for my module classes but im beginning to believe typescript does not allow this.
I am compiling the ts files with Grunt-ts with the module option set to 'amd' but nothing seems to be working. If anyone could help me out and tell me if im on the right path or not that would be great!
I feel like i am trying to do something that is not possible in typescript but im not sure what i'm missing. I would really like to use seperate files for my module classes but im beginning to believe typescript does not allow this.
It does. You should use external modules. i.e.
class BaseViewmodel {
// ....
}
export = BaseViewmodel;
and
import BaseViewmodel = require('./BaseViewmodel');
export class PageViewModel extends BaseViewmodel {
public content: KnockoutObservable<string>;
constructor(ko: KnockoutStatic) {
super(ko);
this.content = this.ko.observable('');
}
}