首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Typescript和AngularJS 1.5:如何处理导出类

Typescript和AngularJS 1.5:如何处理导出类
EN

Stack Overflow用户
提问于 2016-11-16 10:02:00
回答 1查看 2.7K关注 0票数 4

我有这个module.ts文件:

代码语言:javascript
复制
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:

代码语言:javascript
复制
"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;,如果我手动删除它-应用程序运行得很好。但是如果我像这样离开,在浏览器控制台中,我会得到一个错误"exports is not defined“。对此我们能做些什么呢?我不能简单地从.ts文件中删除“导出”,因为这个类在其他文件中使用(我将它导入到那里)。我尝试了不同的编译器选项,但它只是给出了不同的错误(如“定义未定义”等),我不确定如何处理这个问题。也许有一种方法可以让tsc不生产这条线?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-16 10:34:11

每当在typescript中使用importexport关键字时,都会将文件转换为模块。

模块被设计为与commonjsamdes6systemjs等模块系统一起工作。

如果您试图在浏览器中加载原始脚本,而不使用模块加载器或捆绑器,如systemjs、webpack、browserify、jspm等。那么你就不能使用外部模块(所以你不能使用导入/导出)。

您仍然可以使用来自确定类型的类型,但您必须通过///<reference />标记加载它们。

如果使用typescript 2.0,也可以使用类似angular的类型,并在运行时默认导入这些类型

代码语言:javascript
复制
npm install @types/angular

通常,这些类型将公开您现在可以在整个应用程序中使用的全局命名空间声明。

例如,在您的示例中,angular公开了一个ng名称空间,您可以这样使用它:

代码语言:javascript
复制
  promise: ng.IPromise<{ data: any }>;

您还可以轻松地为其添加别名:

代码语言:javascript
复制
import IPromise = ng.IPromise

请注意,此导入的行为与模块导入不同(它只是别名)。

如果您要做的不是一个琐碎的应用程序,我强烈建议您使用一个模块加载器,如webpack,为浏览器编译和捆绑应用程序。仅使用纯脚本有许多限制。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40622864

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档