PhpStorm/WebStorm：AngularJS 注入的服务/工厂是否有任何类型的代码完成

Question

I like WebStorm autocompletion, and use types (jsdoc or .d.ts) everywhere I can.

By using Angular, I wanted to get code-autocompletion of injected service. But did not find anything about this.

Is there any workaround or right solution to get autocompletion eg in such code:

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

Edit: possible solutions i found for now

the first one ist just use JSDOC. eg

//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: best solution i use for now (will be 'answer' after some time):

////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

Workaround is to create new object of someService.

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

But all services is a singletons, so that code will cause an error. We can do the trick like this:

function testCtrl(someService) {      

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

  this._srv.             // now autocompletion will work
}

Webstorm now will aoutocomplete and then we run code service will not initialize so we dont brake our code;

It's not perfect solution, but it's all i wound. If you find better solution, please, let me know.