javascript - typescript 未生成正确的 system.register

Question

所以，我的问题是:

我的应用程序文件结构如下:

Working Folder

当我 tsc 时，会生成相同的结构，但在 dist 目录下

编译配置设置如下:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5",
        "outDir":"dist",
        "module": "system", //commonjs, amd ( requirejs ) , system
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false

    }
} 

我正在使用 Systemjs 在 index.html 上加载模块，如下所示:

  System.config({
         baseURL : "dist",  
      });

      System.import('Application.js')
            .then(null, console.error.bind(console));

Application.ts 文件是这样的:

import {SelectedProducts} from "./Controllers/SelectedProducts";

export class Application  {

    constructor(private controller:SelectedProducts){

    }
 // some methods here

 }

生成的Application.js文件是这样的:

System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var Application;
    return {
        setters:[],
        execute: function() {
            Application = (function () {
                function Application(controller) {
                    this.controller = controller;
                }
  // methods go here

       }());
            exports_1("Application", Application);
        }
    }
});

有人知道为什么会发生这种情况吗？

这并不是 system.register 不符合预期的唯一情况。

我的 ProductsController.ts 也生成错误:

ProductsController.ts 来源:

import {ProductsRepository} from "../Models/ProductsRepository";
import {EditProductView} from "../Views/EditProductView";
import {ListProductsView} from "../Views/ListProductsView";
import {Product} from "../Models/Product";
import {ProductsViewModel} from "../Views/ProductsViewModel";
import {ValidationProvider} from "../Validation/ValidationProvider";

export class SelectedProducts {

    public constructor(private productsRepository:ProductsRepository, 
    private editView:EditProductView,
    private listSelectedView:ListProductsView,
    private validation:ValidationProvider){

    } 
// some methods here

}

js生成的代码:

System.register(["../Models/Product", "../Views/ProductsViewModel"], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var Product_1, ProductsViewModel_1;
    var SelectedProducts;
    return {
        setters:[
            function (Product_1_1) {
                Product_1 = Product_1_1;
            },
            function (ProductsViewModel_1_1) {
                ProductsViewModel_1 = ProductsViewModel_1_1;
            }],
        execute: function() {
            SelectedProducts = (function () {
                function SelectedProducts(productsRepository, editView, listSelectedView, validation) {
                    this.productsRepository = productsRepository;
                    this.editView = editView;
                    this.listSelectedView = listSelectedView;
                    this.validation = validation;
                }

            }());
            exports_1("SelectedProducts", SelectedProducts);
        }
    }
});

有什么想法吗？

Answer 1

在 TypeScript 中，不用作值的模块导入将从输出中删除。这样做的理由是，您可以在设计时使用模块中的类型，但不打算将其用作运行时依赖项。在本例中，SelectedProducts 的唯一用途是作为构造函数参数的类型注释。

使用 import "./Controllers/SelectedProducts"; 确保保留模块导入。

请参阅https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-imports-being-elided-in-my-emit有关模块导入省略的更多信息。