如何导出SystemJS的TypeScript模块？ [英] How to export a TypeScript module for SystemJS?

问题描述

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

On my website I want to import a FancyModule using SystemJS, so that I can create instances of classes which this module exports.

所以我想要实现的是（在ECMAScript 2015兼容网站内） ：$ {

So what I want to achieve is this (within a ECMAScript 2015-compatible website):

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

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

Unfortunately, I am getting the following error:

TypeError：MyFancyModule.MyFancyClass不是构造函数（...）

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

这是我的TypeScript模块：

Here is my TypeScript module:

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

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

这是我的TypeScript编译器设置（ tsconfig.json ）：

And this is my TypeScript compiler setting (tsconfig.json):

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

将我的TypeScript模块编译成：

Which compiles my TypeScript module into:

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 。

For me it looks like MyFancyModule is properly exported but I don't know why I cannot access the MyFancyClass.

推荐答案

p>我认为我设法重现了你的例子。

I think I managed to reproduce your example.

看起来像这个设置，文件 - MyFancyModule.ts - 已经是一个模块了。当您执行

It looks like with this setup, the file - MyFancyModule.ts - is already a module in itself. When you do

export module MyFancyModule {

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

you create a nested module within it.

此代码应该与其他所有内容保持一致。

This code should work with everything else unchanged:

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

或者，您可以从导出模块 .ts文件，并在顶层有导出类，那么您的原始导入将工作。

Alternatively, you can remove export module from the .ts file and have export class at the top level - then your original import will work.

这篇关于如何导出SystemJS的TypeScript模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！