Question

我正在尝试为我的打字稿项目设置模块化结构。我想构建它，以便我可以在不同的文件夹中包含模块，并将每个属于该模块的类放在单独的文件中。我正在开发一个模块，它将作为我所有页面的视图模块。该模块有一个baseviewmodel，它包含通用的pageview函数和一个与knockout结合使用的pageviewmodel来呈现我的页面。

我想要实现的结构如下：

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

正如您所看到的，我正在尝试使用＆appns / ViewModule / PageViewModel＆＃39;来加载pageviewmodel模块。我面临的问题是var viewModule总是未定义的，控制台给我回复了以下错误：

未捕获的TypeError：无法读取属性＆＃39;原型＆＃39;在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

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

我正在使用Grunt-ts编译ts文件，模块选项设置为＆＃39; amd＆＃39;但似乎没有任何工作。如果有人能帮助我，告诉我，如果我在正确的道路上，那将是伟大的！

Answer 1

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

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

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

带有requirejs的Typescript模块，在扩展模块时未定义原型

1 个答案: