带有requirejs的打字稿模块，扩展模块时未定义原型答案

【问题标题】：Typescript modules with requirejs, undefined prototype while extending module带有requirejs的打字稿模块，扩展模块时未定义原型
【发布时间】：2014-11-16 21:49:41
【问题描述】：

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

我想要实现的结构是这样的：

- 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 始终未定义，控制台返回以下错误：

Uncaught TypeError: Cannot read property 'prototype' of undefined on pageviewmodel.js line 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”，但似乎没有任何效果。如果有人可以帮助我并告诉我我是否走在正确的道路上，那就太好了！

【问题讨论】：

标签： javascript requirejs typescript grunt-ts

【解决方案1】：

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

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

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

}

【讨论】：