37

我正在使用 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 服务？

4

4 回答 4

39

2016-05-06：使用 ES6 样式模块的新示例

静态$inject数组和构造函数与上一个示例保持不变。

唯一的变化是将类拆分为多个文件并使用 ES6 模块来提取类定义。

/lib/HelloService.ts：

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

/lib/AnotherService.ts：

import {HelloService} from './HelloService';

/**
 * Service that depends on HelloService.
 */
export class AnotherService {

    // Define `HelloService` as a dependency.
    static $inject = ['HelloService'];
    constructor(
        // Add the parameter and type definition.
        public HelloService: HelloService
    ){}

    public getWelcomeMessage():String {
        // Access the service as: `this.HelloService`
        // Enjoy auto-completion and type safety :)
        var helloMsg = this.HelloService.getWelcomeMessage();
        return "Welcome from AnotherService, " + helloMsg;
    }
}

/index.ts：

// Using the services.
import {HelloService} from './lib/HelloService';
import {AnotherService} from './lib/AnotherService';

angular.module('HelloApp', [])
    .service('HelloService', HelloService)
    .service('AnotherService', AnotherService)
    .run(['AnotherService', function(AnotherService: AnotherService){
        console.log(AnotherService.getWelcomeMessage());
    }]);

上一个答案：使用命名空间

根据史蒂夫芬顿的回答构建：

要允许依赖注入，请在您的类上添加一个静态$inject数组。

请参阅Angular $injector 文档了解$inject数组的工作原理。

依赖项将按照数组给定的顺序注入到您的构造函数中（并使其与缩小一起使用）。

依赖注入示例：

namespace MyModule {
    /**
     * Angular Service
     */
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello from HelloService";
        }
    }

    /**
     * Service that depends on HelloService.
     */
    export class AnotherService {

        // Define `HelloService` as a dependency.
        static $inject = ['HelloService'];
        constructor(
            // Add the parameter and type definition.
            public HelloService: MyModule.HelloService
        ){}

        public getWelcomeMessage():String {
            // Access the service as: `this.HelloService`
            // Enjoy auto-completion and type safety :)
            var helloMsg = this.HelloService.getWelcomeMessage();
            return "Welcome from AnotherService, " + helloMsg;
        }
    }
}


// Using the services.
angular.module('app.services.helloService', [])
    .service('HelloService', MyModule.HelloService)
    .service('AnotherService', MyModule.AnotherService)
    .run(['AnotherService', function(AnotherService: MyModule.AnotherService){
        console.log(AnotherService.getWelcomeMessage());
    }]);
于 2014-08-28T03:31:53.367 回答
15

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

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();
于 2014-03-07T09:01:40.340 回答
6

我有两个解决方案，第一个为您提供基于类的语法，第二个在全局范围内绝对没有任何内容......

您可以通过仅向全局范围添加一个句柄来稍微妥协（如果您有多个要避免放置在全局范围中的类，因为目前您只有一个类，这确实适用）。

以下代码仅将模块留在全局范围内。

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

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

}

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

angular.module('app.services.anotherService', []).factory('anotherService', () => {
    return new MyModule.AnotherService();
});

或者，要在全局范围内不留下任何东西，您可以避免使用类语法并使用“plain old JavaScript”：

angular.module('app.services.helloService', []).factory('helloService', () => {
    var HelloService = (function () {
        function HelloService() {
        }
        HelloService.prototype.getWelcomeMessage = function () {
            return "Hello";
        };
        return HelloService;
    })();

    return new HelloService();
});
于 2013-10-18T13:21:43.443 回答
-1

这是我正在遵循的方法：

module HelperServices {
    export class helloService {
       sayHelloWorld: () => string;
        constructor() {
            this.sayHelloWorld = () => {
                return "Hello World";
            }
        }
    }
}

就如此容易..

于 2016-02-05T08:36:29.843 回答