Typescript和AngularJS 1.5：如何處理導出類

Question

我有這個module.ts文件：

import { IHttpService, IPromise } from 'angular';

export class ProductService {
    static $inject = ["$http"];
    constructor(private $http: IHttpService) { }

    loaded: boolean = false;
    promise: IPromise<{ data: any }>;

    getProducts(): IPromise<{ data: any }> {
        if (!this.loaded) {
            this.loaded = true;
            this.promise = this.$http.get('/products.json');
        }
        return this.promise;
    }
}

var module = angular.module("psShopping", ["ngComponentRouter"]);
module.value("$routerRootComponent", "shoppingApp");
module.service('products', ProductService);

並將其轉譯/編譯為module.js：

"use strict";
var ProductService = (function () {
    function ProductService($http) {
        this.$http = $http;
        this.loaded = false;
    }
    ProductService.prototype.getProducts = function () {
        if (!this.loaded) {
            this.loaded = true;
            this.promise = this.$http.get('/products.json');
        }
        return this.promise;
    };
    ProductService.$inject = ["$http"];
    return ProductService;
}());
exports.ProductService = ProductService;
var module = angular.module("psShopping", ["ngComponentRouter"]);
module.value("$routerRootComponent", "shoppingApp");
module.service('products', ProductService);

有問題的行是： exports.ProductService = ProductService; 如果我手動刪除它-該應用程序運行完美。 但是，如果我這樣離開，在瀏覽器控制台中，我會收到一個錯誤“未定義導出”。 關於這個還能做什么？ 我不能僅從.ts文件中刪除“導出”，因為此類已在其他文件中使用（我將其導入到那里）。 我嘗試了不同的編譯器選項，但它給了我不同的錯誤（例如“未定義定義”等），我不確定如何處理。 也許有一種方式，TSC不會產生這一行？

Answer 1

每當您在打字稿中使用import和export關鍵字時，便會將文件轉換為模塊。

模塊被設計為可與諸如commonjs ， amd ， es6 ， systemjs等模塊系統一起使用...

如果您嘗試在不使用模塊加載器或捆綁程序（例如systemjs，webpack，browserify，jspm等）的情況下在瀏覽器中加載原始腳本，則無法使用外部模塊（因此無法使用導入/導出） ）。

您仍然可以使用絕對類型的類型，但是必須通過///<reference />標記加載它們。

如果使用打字稿2.0，則在運行時默認也可以輸入諸如angular的類型並導入

npm install @types/angular

通常，這些類型將公開全局名稱空間聲明，您現在可以在整個應用程序中使用它。

例如，在您的情況下，angular公開了ng命名空間，您可以像這樣使用它：

  promise: ng.IPromise<{ data: any }>;

您還可以輕松地為其別名：

import IPromise = ng.IPromise

請注意，此導入的行為與模塊導入不同（只是別名）。

如果您打算做一些瑣碎的應用程序之外的工作，我強烈建議您使用模塊加載程序（例如webpack）來為瀏覽器編譯和捆綁該應用程序。 僅使用普通腳本有很多限制。