如何使用Flowtype正确处理AngularJS $注入注释

时间:2016-08-11 08:02:18

标签: javascript angularjs flowtype

我正在尝试在AngularJS(1.5)项目中使用Flowtype,但它抱怨$inject annotation。处理这个问题的正确方法是什么?

Flow版本0.30.0

示例代码

导航/链接-controller.js

export default class LinksController {

  constructor(navigationService) {
    this.availableLinks = navigationService.availableLinks;
  }
}

LinksController.$inject = ['NavigationService'];

导航/ index.js

...
import NavigationService from './navigation-service';
import LinksController from './links-controller';

export default angular.module('app.links', [uirouter])
  .config(routing)
  .service('NavigationService', NavigationService)
  .controller('LinksController', LinksController)
  .name;

示例流式输出

LinksController.$inject = ['NavigationService'];
                ^^^^^^^ property `$inject`. Property not found

2 个答案:

答案 0 :(得分:3)

这样做的原因是,通过创建一个类,您将在Flow中定义其接口。

当您为类分配$inject时,您实际上正在添加一个未在类接口中定义的新属性,这是Flow中的类型错误。

在Flow中有两种选择进行此类型检查:

添加静态属性类型定义:

class LinksController {
  static $inject: Array<string>;
  constructor() {...}
}

LinksController.$inject = ['NavigationService'];

添加静态属性:

class LinksController {
  static $inject = ['NavigationService'];
  constructor() {...}
}

使用第二个选项,您需要在esproposal.class_static_fields=enable

[options]部分内启用.flowconfig

由于这是一项尚未添加到JavaScript标准但未在任何浏览器中提供的提案,因此您还需要使用Babel之类的内容进行编译(您需要stage-2 presettransform-class-properties plugin)。

答案 1 :(得分:-3)

如果您正在使用外部依赖注入,那么您可能希望链接下面的函数。

angular
   .module('app',[])
   .controller('LinkCtrl', LinkCtrl);

LinkCtrl.$inject = ['NavigationService'];

如果您完全按照上述方式完成,可以分享您的完整剪片吗?