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

Question

I have an Angular factory service in JavaScript that I defined like this:

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

}]);

Now I want to convert it into 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);
}

Do you see what I mean? TypeScript does not allow nested classes, which could have solved the issue. Also TypeScript solution looks very uncool. Is there a more elegant solution?

Answer 1

Instead of :

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

You can put the Create on MyServiceFactory ie:

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

Please note that valid JavaScript is valid TypeScript ( more )

Answer 2

You can pass the injected variables as parameters to your other class, eg:

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