如何为 SystemJS 导出 TypeScript 模块？

Question

在我的网站上，我想使用 SystemJS 导入 FancyModule，以便我可以创建此模块导出的类实例。

所以我想要实现的是这个（在 ECMAScript 2015 兼容网站中）：

SystemJS.import('MyFancyModule').then(function(MyFancyModule) {
  var myFancyInstance = new MyFancyModule.MyFancyClass('Test');
  console.log(myFancyInstance.text);
});

不幸的是，我收到以下错误：

TypeError: MyFancyModule.MyFancyClass is not a constructor(…)

这是我的 TypeScript 模块：

export module MyFancyModule {
  export class MyFancyClass {
    public text: string;

    constructor(text: string) {
      this.text = text;
    }
  }
}

这是我的 TypeScript 编译器设置 (tsconfig.json):

{
  "compilerOptions": {
    "module": "system",
    "moduleResolution": "node",
    "outFile": "dist/browser/MyFancyModule.js",
    "rootDir": "src/ts",
    "target": "es5"
  }
}

它将我的 TypeScript 模块编译成：

System.register("MyFancyModule", [], function(exports_1, context_1) {
  "use strict";
  var __moduleName = context_1 && context_1.id;
  var MyFancyModule;
  return {
    setters: [],
    execute: function() {
      (function(MyFancyModule) {
        var MyFancyClass = (function() {
          function MyFancyClass(text) {
            this.text = text;
          }

          return MyFancyClass;
        }());
        MyFancyModule.MyFancyClass = MyFancyClass;
      })(MyFancyModule = MyFancyModule || (MyFancyModule = {}));
      exports_1("MyFancyModule", MyFancyModule);
    }
  }
});

对我来说 MyFancyModule 似乎已正确导出，但我不知道为什么我无法访问 MyFancyClass。

Answer 1

Typescript 负责如何从它支持的不同模块系统加载模块。
这个想法是你有一个特定的语法（在打字稿中）并根据你指定给编译器的模块（例如在 tsconfig.json 中）它会根据选定的模块系统。

所以你需要做的就是：

import * as MyFancyModule from "MyFancyModule";

var myFancyInstance = new MyFancyModule.MyFancyClass('Test');
console.log(myFancyInstance.text);

编辑

编译器应该生成如下内容：

System.register(["MyFancyModule"], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var MyFancyModule;
    var myFancyInstance;
    return {
        setters:[
            function (MyFancyModule_1) {
                MyFancyModule = MyFancyModule_1;
            }],
        execute: function() {
            myFancyInstance = new MyFancyModule.MyFancyClass('Test');
            console.log(myFancyInstance.text);
        }
    }
});

如您所见，编译后的 js 中没有此 import from 语法的痕迹。

Answer 2

我想我成功地重现了你的例子。

看起来使用此设置，文件 - MyFancyModule.ts - 本身已经是一个模块。当你做

export module MyFancyModule {

您在其中创建了一个嵌套模块。

这段代码应该可以在其他一切不变的情况下工作：

    SystemJS.import('MyFancyModule').then(function(MyFancyModule) {
        var myFancyInstance = new MyFancyModule.MyFancyModule.MyFancyClass('Test');
        console.log(myFancyInstance.text);
    });

或者，您可以从 .ts 文件中删除 export module 并在顶层添加 export class - 然后您的原始导入将起作用。

如何为 SystemJS 导出 TypeScript 模块？

How to export a TypeScript module for SystemJS?

module

typescript

tsc

ecmascript-6

systemjs

编辑