2

我正在尝试为我的打字稿项目设置模块化结构。我想对其进行结构化，以便我可以将模块放在不同的文件夹中，并将属于该模块的每个类放在单独的文件中。我正在开发一个模块，该模块将用作我所有页面的视图模块。该模块有一个包含通用页面浏览功能的基本视图模型和一个与剔除结合使用以呈现我的页面的页面浏览模型。

我想要实现的结构如下所示：

- ts folder

   ViewModule
       - BaseViewModel.ts
       - PageViewModel.ts (extends BaseViewModel)

   - init.ts

BaseViewmodel 和 PageviewModel 都属于 ViewModule，但是是独立的文件。

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('');
        }

    }
}

我使用 init.ts 来初始化我的应用程序并使用 requirejs 注入依赖项： 

define(['app/ViewModule/PageViewModel'],
    (viewModule: typeof ViewModule.PageViewModel) => {
            console.log(viewModule);
    });

如您所见，我正在尝试使用“app/ViewModule/PageViewModel”加载 pageviewmodel 模块。我面临的问题是 var viewModule 始终未定义，控制台返回以下错误：

未捕获的类型错误：无法读取 pageviewmodel.js 第 4 行上未定义的属性“原型”

编译后的 pageviewmodel（给出错误）如下所示：

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

我觉得我正在尝试做一些打字稿中不可能做的事情，但我不确定我错过了什么。我真的很想为我的模块类使用单独的文件，但我开始相信打字稿不允许这样做。

我正在使用 Grunt-ts 编译 ts 文件，并将模块选项设置为“amd”，但似乎没有任何效果。如果有人可以帮助我并告诉我我是否走在正确的道路上，那就太好了！

4

1 回答 1

3

我觉得我正在尝试做一些打字稿中不可能做的事情，但我不确定我错过了什么。我真的很想为我的模块类使用单独的文件，但我开始相信打字稿不允许这样做。

确实如此。您应该使用外部模块。IE

class BaseViewmodel {
   // .... 
}

export = BaseViewmodel;

和

import BaseViewmodel = require('./BaseViewmodel');
export class PageViewModel extends BaseViewmodel {

    public content: KnockoutObservable<string>;

    constructor(ko: KnockoutStatic) {
        super(ko);

        this.content = this.ko.observable('');
    }

}

更多：https ://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1

于 2014-11-17T01:04:45.093 回答