在 Typescript 中将依赖项注入静态工厂答案

【问题标题】：Inject Dependencies into Static Factory in Typescript在 Typescript 中将依赖项注入静态工厂
【发布时间】：2015-08-18 03:51:46
【问题描述】：

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

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

这是我的服务：

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);
  }

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

【问题讨论】：

标签： angularjs service dependency-injection typescript factory

【解决方案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
            }
        }
    })

打字稿 1.5

目前 Typescript 直到 1.6 版本才允许类表达式，我个人暂时使用这种语法：

class MyClass {

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

    }
}

然后我使用允许在构建期间使用 ng-annotate 的标准 Angular 工厂定义，并在返回之前使用工厂注入对类进行 currify：

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)

【讨论】：

【解决方案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]);

【讨论】：

【解决方案3】：

您有两种不同的选择：

1) 在配置函数中定义它

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

2) 定义何时将函数添加到模块中

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

【讨论】：