Question

我想使用工厂来管理我的一些依赖注入，所以我在一个函数内创建一个本地类。我正在使用的JavaScript框架（AngularJS）会将函数的返回值注入构造函数。

如何从工厂函数外部引用返回的类Record的类型？

/** Define factory to create Record classes */
export default function RecordFactory($window) {
  return class Record { // I want to reference this class as a type
    doSomething() {
      // use $window service
    }
  }

}

/**
 * Controller for page with returned class of RecordFactory injected
 * into the constructor
 */
class RecordPageCtrl {
  record
  constructor(Record) { // How do I specify the type of Record here?
    this.record = new Record();
  }
}

// Dependency Injection is handled by AngularJS
angular.module('myApp', [])
  .factory('Record', RecordFactory)
  .controller('RecordPageCtrl', RecordPageCtrl)

注意：我试图避免使用Record类中的所有方法维护接口。

Answer 1

这适合我。

namespace Factored {
  // Class Record wrapped in namespace only to distinguish from other Record usages
  export class Record { // I want to reference this class as a type
    doSomething() {
      // use $window service
    }
  };
}

/** Define factory to create Record classes */
export default function RecordFactory($window) {
  return Factored.Record; // return class reference
}

/**
 * Controller for page with returned class of RecordFactory injected
 * into the constructor
 */
class RecordPageCtrl {
  record: Factored.Record;
  constructor(Record: typeof Factored.Record) { // Referencing namespaced class
    this.record = new Record();
    this.record.doSomething();
  }
}

// Dependency Injection is handled by AngularJS
angular.module('myApp', [])
  .factory('Record', RecordFactory)
  .controller('RecordPageCtrl', RecordPageCtrl)

Answer 2

我重新考虑了如何创建工厂并将服务注入到Record这样的类中。通过构造函数传递服务，工厂可以轻松传入服务并允许AngularJS处理依赖注入。

/** Class where service needs to be injected */
class Record {
  constructor(private myInjectedService) {}
    doSomething() {
      // use myService
      this.myInjectedService.log('Hello World');
    }
}

/** Define factory to create Record class instances */
function RecordFactory(MyService) {
  return new Record(MyService); // return a new class
}

/**
 * Controller for page 
 * RecordFactory return variable is injected into the constructor
 */
class RecordPageCtrl {
  constructor(public Record: Record) {
    this.Record.doSomething();
  }
}

/** Service to inject into Record class */
class MyService {
    log(message: string) {
        console.log(message);
    }
}

let myServiceInst = new MyService();

// directly instantiated
let factoryInstance = RecordFactory(myServiceInst);
new RecordPageCtrl(factoryInstance);

// Dependency Injection handled by AngularJS
angular.module('myApp', [])
  .factory('Record', RecordFactory)
  .service('MyService', MyService)
  .controller('RecordPageCtrl', RecordPageCtrl)

注意，如果您希望能够创建注入工厂的Record类的多个实例，则需要让工厂返回另一个工厂，该工厂在调用时实例化该函数。

在工厂函数外部公开类型的本地TypeScript类

2 个答案: