2016-11-16 62 views
2

我有這個module.ts文件:打字稿和AngularJS 1.5:如何辦理出口類

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); 

,這被transpiled /編譯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文件中刪除「導出」,因爲這個類在其他文件中使用(我在那裏導入它)。我嘗試了不同的編譯器選項,但它只是給了我不同的錯誤(如「定義沒有定義」等),我不知道如何處理這個..也許theres一種方式,TSC將不會產生這條線?

謝謝你的幫助!

+1

你如何在瀏覽器中加載模塊?你使用的是browserify/webpack/jspn等?你需要導出課程嗎? – dtabuenc

+0

我只是有一個index.html附加所有的腳本文件。我附加的一個文件是上面的文件(module.js)。我只在應用程序中有一個模塊(稱爲psShopping)。 – marc08

+0

在你的tsconfig中設置'「module」:「none」'選項 – dtabuenc

回答

3

每當您在打字稿中使用importexport關鍵字時,就會將該文件轉換爲模塊。

模塊設計以及模塊系統,如commonjs工作,amdes6systemjs等....

如果要加載瀏覽器中的原始腳本,而無需使用一個模塊lodaer或打捆如systemjs,webpack,browserify,jspm等....那麼你不能使用外部模塊(所以你不能使用導入/導出)。

您仍然可以使用絕對鍵入的類型,但您必須通過t ///<reference />標籤加載它們。

如果使用打字稿2.0分型樣的角度也可和默認導入當您運行

npm install @types/angular 

通常,這些分型將暴露的全局命名空間的聲明,你現在就可以thorughout您的應用程序中使用。

例如,在你的情況的角度暴露了ng命名空間,你會使用它想:

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

你也可以很容易地別名是:

import IPromise = ng.IPromise 

注意,這個進口行爲與模塊不同進口(它只是別名)。

如果你打算做除了一個簡單的應用程序以外的任何事情,我強烈建議你使用一個模塊加載程序,如webpack來編譯和捆綁瀏覽器的應用程序。僅使用純腳本有很多限制。