微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我有这个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不会产生此行?

感谢您的任何帮助!

解决方法:

每当您在打字稿中使用import和export关键字时,便会将文件转换为模块.

模块旨在与commonjs,amd,es6,systemjs等模块系统一起使用…

如果您尝试在浏览器中加载原始脚本,而不使用诸如Systemjs,Webpack,browserify,JSPM等模块标识符或捆绑程序,那么您将无法使用外部模块(因此,您不能使用import /出口).

您仍然可以使用绝对类型的类型,但是必须通过///< reference />加载它们.标签.

如果使用打字稿2.0,则在运行时认也可以输入诸如angular的类型并导入

npm install @types/angular

通常,这些类型将公开全局名称空间声明,您现在可以在应用程序中使用它.

例如,在您的情况下,angular公开了ng命名空间,您可以像这样使用它:

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

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

import IPromise = ng.IPromise

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

如果您打算做一些琐碎的应用程序之外的工作,我强烈建议您使用模块加载程序(例如webpack)来为浏览器编译和捆绑该应用程序.仅使用普通脚本有很多限制.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐