如何处理 TypeScript 中的闭包(角度注入）

How to handle closures in TypeScript (Angular injections)?

本文关键字：闭包 注入 TypeScript 何处理 处理      更新时间：2023-09-26

我在 JavaScript 中有一个 Angular 工厂服务，我定义如下：

app.service('MyServiceFactory', ['$http', '$timeout', '$interval',
  function($http, $timeout, $interval) {
  function MyService() {
    // I can use all injected values here without additional efforts
  }
  this.Create = function() {
    return new MyService();
  }
}]);

现在我想把它转换成TypeScript：

module Services {
  export class MyServiceFactory {
    static $inject: string[] = ['$timeout', '$interval', '$http'];
    constructor(
      private timeout: angular.ITimeoutService,
      private interval: angular.IIntervalService,
      private http: angular.IHttpService) {
    }
    public create(): MyService { return new MyService(); };
  }
  export class MyService() {
    // I have a problem here. I need to redefine and
    // initialize all variables, injected into my factory class
  }
  angular.module('MyModule').service('MyServiceFactory', MyServiceFactory);
}

你明白我的意思吗？TypeScript 不允许嵌套类，这本可以解决问题。另外，TypeScript解决方案看起来很不酷。有没有更优雅的解决方案？

而不是 ： 

export class MyService() {
    // I have a problem here. I need to redefine and
    // initialize all variables, injected into my factory class
  }

您可以将Create放在MyServiceFactory上，即： 

module Services {
  export class MyServiceFactory {
    static $inject: string[] = ['$timeout', '$interval', '$http'];
    constructor(
      private timeout: angular.ITimeoutService,
      private interval: angular.IIntervalService,
      private http: angular.IHttpService) {
    }
    public create(){ 
      // Use the revealing module pattern 
      // And let the compiler infer the return type
      // e.g.
      var foo = 23;
      return {
         foo
      }
    };
  }
  angular.module('MyModule').service('MyServiceFactory', MyServiceFactory);
}

请注意，有效的 JavaScript 是有效的 TypeScript （更多）

您可以将注入的变量作为参数传递给其他类，例如：

export class MyServiceFactory {
  static $inject: string[] = ['$timeout', '$interval', '$http'];
  constructor(
    private timeout: angular.ITimeoutService,
    private interval: angular.IIntervalService,
    private http: angular.IHttpService) {
  }
  public create(): MyService {
    return new MyService(this.timeout, this.interval, this.http);
  }
}
export class MyService {
  constructor(
    private timeout: angular.ITimeoutService,
    private interval: angular.IIntervalService,
    private http: angular.IHttpService) {
    // no more problems here, you can play with the injected variables again
  }
}
angular.module('MyModule').service('MyServiceFactory', MyServiceFactory);
相关文章：