在TypeScript中将依赖项注入静态工厂

Question

我有一个用TypeScript编写的类服务。在这个类中，我定义了一个静态工厂，并注入了依赖项。

当我压缩应用程序时，依赖项会被压缩，我会收到未定义的提供者错误。

以下是我的服务代码：

export class TInterceptor {    
public static $inject = ['$q', '$rootScope'];
public static Factory($q:ng.IQService, $rootScope:ng.IRootScopeService)
{
  return new TInterceptor($q, $rootScope);
}
constructor(private $q:ng.IQService, private $rootScope:ng.IRootScopeService){}...}

这里调用了服务：

  angular
    .module('t')
    .config(config);

  function config($httpProvider:ng.IHttpProvider)
  {
    $httpProvider.interceptors.push(TInterceptor.Factory);
  }

我的问题是，当我压缩我的代码时，如何确保依赖关系不会被覆盖？

- tgrux

Answer 1

编辑：Typescript 1.6 更新

现在 Typescript 1.6 已经发布，支持类表达式，您可以直接使用带有闭包的类表达式来使用注入：

angular.module('myApp')
    .factory('MyFactory', function($q, $http) {

        return class {

            constructor(data) {
                // Here you have access to $q and $http
            }
        }
    })

---

Typescript 1.5

目前在 Typescript 1.5 版本中不允许使用类表达式，直到版本 1.6。我个人现在使用以下语法：

class MyClass {

    constructor(
        private $q: ng.IQService,
        private $http: ng.IHttpService
        data) {

    }
}

然后我使用标准的Angular工厂定义，允许在构建过程中使用ng-annotate，并在返回之前使用工厂注入对类进行柯里化：

angular.module('myApp')
    .factory('MyFactory', function($q, $http) {

        var factory = MyClass

        // Return curried MyClass
        return Function.prototype.bind.apply(factory,
            Array.prototype.concat.apply([factory], arguments))
    });

返回行等同于：

return MyClass.bind(MyClass, $q, $http)

这样做可读性较差，但可以避免每次更改依赖项时都要重复编写两次。

或者，如果您有 Lodash 或 Underscore，可以以更优雅的方式实现：

return _.curry(MyClass).apply(this, arguments)

我只需要提供必要的数据，就能够实例化我的类：

new MyFactory(data)

- kube

Answer 2

注册工厂。即，

angular.module('myapp').factory('interceptorFactory', ['$q','$rootScope',TInterceptor.Factory]);

并在配置块中提供工厂名称：

$httpProvider.interceptors.push('interceptorFactory');

或者也可以提供数组（它应该同样有效，因为它内部使用$injector.invoke，它不是一个字符串）

 $httpProvider.interceptors.push(['$q','$rootScope', TInterceptor.Factory]);

你忘记在config块上进行显式注释了。

.config(['$httpProvider', config]);

- PSL

Answer 3

你有两个不同的选择：

1）在配置函数中定义它

function config(){...}
config.$inject = ['$httpProvider'];

2) 当你将函数添加到模块中时进行定义

angular
  .module('t')
  .config(['$httpProvider', config]);

- Brocco