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

Question

我正在尝试使用 Flowtype in an AngularJS (1.5) project but it complains about the $inject annotation。正确的处理方法是什么？

流版本 0.30.0

示例代码

navigation/links-controller.js

export default class LinksController {

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

LinksController.$inject = ['NavigationService'];

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

Answer 1

如果您正在使用外部依赖注入，那么您可能想要link下面的函数。

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

LinkCtrl.$inject = ['NavigationService'];

如果你完全按照上面的方式做的，能分享一下你的完整截图吗？

Answer 2

这样做的原因是，通过创建 class，您将在 Flow 中定义它的接口。

当您将 $inject 分配给 class 时，您实际上是在添加一个未在 class 接口中定义的新属性，这是一个类型错误在流中。

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

添加静态属性类型定义：

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

LinksController.$inject = ['NavigationService'];

添加静态属性:

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

对于第二个选项，您需要在 .flowconfig

的 [options] 部分启用 esproposal.class_static_fields=enable

因为这是一个尚未添加到 JavaScript 标准的提案，并且在任何浏览器中都不可用，您还需要使用 Babel (you'll need either the stage-2 preset or the transform-class-properties plugin).

之类的东西对其进行编译。

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

How to properly handle AngularJS $inject annotation with Flowtype

javascript

angularjs

flowtype