Typescript 和 AngularJS 1.5：如何处理导出类

Posted 2023-03-13

【中文标题】Typescript 和 AngularJS 1.5：如何处理导出类

【英文标题】：Typescript and AngularJS 1.5: How to handle export class

【发布时间】：2017-03-30 02:30:14

【问题描述】：

我有这个 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 不生产这条线？

【问题讨论】：

你是如何在浏览器中加载模块的？你在使用 browserify/webpack/jspn 等吗？？？需要导出类吗？

我只有一个附有所有脚本文件的 index.html。我附加的文件之一是上面的文件（module.js）。我的应用中只有一个模块（称为 psShopping）。

在你的 tsconfig 中设置 "module" :"none" 选项

您只能在浏览器中不使用模块加载器的情况下获得这么多。您将只能导入类型，而不是其他模块。

我明白了，是的，现在我得到“当 '--module' 为 'none' 时，不能使用导入、导出或模块扩充。”那么我现在如何修改 module.ts 文件以使其全部工作？或者我可以通过哪些其他方式来完成这项工作（在浏览器中使用模块加载器？）

【参考方案1】：

每当您在 typescript 中使用 import 和 export 关键字时，您就是在将文件转换为模块。

模块设计用于与commonjs、amd、es6、systemjs 等模块系统一起工作...

如果您尝试在浏览器中加载原始脚本而不使用模块加载器或捆绑器，例如 systemjs、webpack、browserify、jspm 等......那么您不能使用外部模块（所以您不能使用进口/出口）。

你仍然可以使用确定类型的类型，但你必须通过///<reference />标签加载它们。

如果使用 typescript 2.0 类型，如 angular 也可以在运行时默认导入

npm install @types/angular

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

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

  promise: ng.IPromise< data: any >;

你也可以很容易地给它起别名：

import IPromise = ng.IPromise

请注意，此导入的行为与模块导入的行为不同（它只是别名）。

如果您要做的不是简单的应用程序，我强烈建议您使用模块加载器（例如 webpack）为浏览器编译和捆绑应用程序。仅使用纯脚本有很多限制。