一尘不染

如何使用不会污染全局范围的TypeScript类定义AngularJS服务?

angularjs

我正在使用AngularJS和TypeScript。我想使用Typescript类实现AngularJS服务,如下所示:

class HelloService {
    public getWelcomeMessage():String {
        return "Hello";
    }
}

angular.module('app.services.helloService', []).factory('helloService', () => {
    return new HelloService();
});

这将编译为以下javascript代码:

var HelloService = (function () {
    function HelloService() {
    }
    HelloService.prototype.getWelcomeMessage = function () {
        return "Hello";
    };
    return HelloService;
})();

angular.module('app.services.helloService', []).factory('helloService', function () {
    return new HelloService();
});

这用变量HelloService污染了全局名称空间,我显然不希望这样做。(我使用Chrome的控制台验证了HelloService是一个对象。)如何解决/避免此问题?

我尝试了明显的方法:

angular.module('app.services.helloService', []).factory('helloService', function () {
    class HelloService { ...} 
    return new HelloService();
});

但这给了我一个编译错误(“意外令牌;预期为“语句”。”)。

我能想到的一种可能的解决方案是以某种方式使用TypeScript的导入和导出,而后者又将使用RequireJS。这可能会将HelloService包装在定义函数中,从而避免HelloService污染全局范围。但是,我现在不想在AngularJS应用程序中使用RequireJS,因为我认为AngularJS对于我的使用已经足够了,并且增加了复杂性。

所以,我的问题是,如何使用不会污染全局范围的TypeScript类定义AngularJS服务?


阅读 224

收藏
2020-07-04

共1个答案

一尘不染

我应该提供我实际上结束的工作:

module MyModule {
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

    angular.module('app.services.helloService', []).factory('helloService', () => {
        return new HelloService();
    });
}

这样我可以用

return new HelloService();

代替

return new MyModule.HelloService();
2020-07-04