PhpStorm/WebStorm：AngularJS 注入的服務/工廠是否有任何類型的代碼完成

Question

我喜歡 WebStorm 自動補全，並盡可能使用類型（jsdoc 或 .d.ts）。

通過使用 Angular，我想獲得注入服務的代碼自動完成功能。 但沒有發現任何關於此的信息。

是否有任何解決方法或正確的解決方案來獲得自動完成，例如在這樣的代碼中：

//SERVICE file
angular
  .module('testModule')
  .service('someService', someService);

function someService() {
  return {
    method1: method1,
  };

  /**
   * here some description
   */
  function method1() {
  }
}

//CONTROLLER file
angular
  .module('testModule')
  .controller('testCtrl', testCtrl);

testCtrl.$inject = ['someService'];

function testCtrl(someService) {
  //here i want to have autocompletion of all possible methods of the 'someService' service
  someService.method1();
}

編輯：我現在找到的可能的解決方案

第一個就是使用 JSDOC。 例如

//SERVICE file
angular
  .module('testModule')
  .service('someService', someService);


/**
 * some nice service
 */
function someService() {
  /**
   * here some description
   */
  this.method1 = function() {
  }
}



//FACTORY file example
/**
 * for factory, you should define and instantiate the class,
 * or write big jsdoc with @typedef //bad way
 * @returns {someService}
 */
function someFactory() {
  //return new someService(); //easy way, since all methods are described in the class

  //hard way, since you have to define all methods and return types in @typedef again

  /**
   * @typedef {{method1OfFactory: function()}} someService
   */
  var retObj = {}
  retObj.method1OfFactory = function(){}
  return retObj;
}



//CONTROLLER file
angular
  .module('testModule')
  .controller('testCtrl', testCtrl);

testCtrl.$inject = ['someService'];

/**
 * one of solution, just jsdoc
 * @param {someService} someService
 */
function testCtrl(someService) {
  someService.method1(); //here you got the autocompletion
}

//alternative inline type doc
function testCtrl2(/**someService*/someService) {
  someService.method1(); //here you got the autocompletion
}

//alternative fake declaration declaration (see menya's answer)
function testCtrl3(someService) {
  false ? someService = new someService() : '';
  someService.method1(); //here you got the autocompletion
}

Edit2：我現在使用的最佳解決方案（一段時間后將是“答案”）：

////FILE: some.factory.js
(function factoryIIFE() { //IIFE
  'use strict';

  angular
    .module('module1')
    .factory('someByFactory', SomeFactory);

  function SomeFactory() {
    /**@class module1.SomeByFactory*/
    return {
      someFactoryMethod: someFactoryMethod
    };

    /**
     * @return {string} by factory method
     */
    function someFactoryMethod() {
      return 'someFactoryMethod';
    }
  }

}()); //IIFE

////FILE: some.service.js
(function someServiceIIFE() { //IIFE
  'use strict';

  angular
    .module('module1')
    .service('someService', SomeService);

  SomeService.$inject = ['someByFactory'];
  /**
   * info: the name of service/factory should NOT match function name
   * so use namespace, like in the example, or rename function
   * i think its because of IIFE
   * @param {module1.SomeByFactory} createdByFactory
   * @class module1.SomeService
   * @constructor
   */
  function SomeService(createdByFactory) {
    /**
     * @return {string} text, using factory
     */
    this.someServiceMethod = function(){
      return 'service method, calling;' + createdByFactory.someFactoryMethod();
    }
  }

}()); //IIFE

////FILE: some.directive.js
(function directiveIIFE() { //IIFE
  'use strict';

  angular
    .module('module1')
    .directive('someDirective', directive);

  function directive() {
    return {
      templateUrl     : 'directive.html',
      restrict        : 'E',
      link            : link,
      controller      : DirectiveCtrl,
      controllerAs    : 'vm',
      bindToController: true,
    };
  }

  function link(scope, element, attrs, /**DirectiveCtrl*/ctrl) {
    scope.text = ctrl.anyProp;
    scope.textFactory = ctrl.serviceResult;
    scope.textService = ctrl.factoryResult;
  }

  DirectiveCtrl.$inject = ['someService', 'someByFactory'];

  /**
   *
   * @param {module1.SomeService} someService
   * @param {module1.SomeByFactory} fromFactory
   * @constructor
   */
  function DirectiveCtrl(someService, fromFactory) {
    var vm = this;
    vm.anyProp = 'ctrl prop';
    vm.serviceResult = someService.someServiceMethod();
    vm.factoryResult = fromFactory.someFactoryMethod();
  }

}()); //IIFE

Answer 1

解決方法是創建 someService 的新對象。

function testCtrl(someService) {
  var srv = new someService();
  srv.             // now autocompletion will work
}

但是所有的服務都是單例的，所以這樣的代碼會導致錯誤。 我們可以這樣做：

function testCtrl(someService) {      

  false ? this._srv = new someService() : '';
  this._srv = someService;

  this._srv.             // now autocompletion will work
}

Webstorm 現在會自動完成，然后我們運行的代碼服務不會初始化，所以我們不會剎車我們的代碼；

這不是完美的解決方案，但這就是我的全部。 如果您找到更好的解決方案，請告訴我。