Wie AngularJS $ inject Annotation ordnungsgemäß mit FlowType

Question

umgehen Ich versuche Flowtype in einem AngularJS (1.5) Projekt zu verwenden, aber es klagt über die $inject annotation. Was ist der richtige Weg, damit umzugehen?

Flow-Version 0.30.0

Beispielcode

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; 

Beispiel flowtype Ausgabe

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

Answer 1

Der Grund dafür ist, dass Sie beim Erstellen einer Klasse die Schnittstelle in Flow definieren.

Wenn Sie der Klasse $inject zuweisen, fügen Sie effektiv eine neue Eigenschaft hinzu, die nicht in der Klassenschnittstelle definiert wurde und in Flow ein Typfehler ist.

Sie haben zwei Möglichkeiten für die Herstellung dieser Typprüfung in Fluss:

eine statische Eigenschaft Typdefinition hinzufügen:

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

LinksController.$inject = ['NavigationService']; 

Hinzufügen einer statischen Eigenschaft:

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

Mit der zweiten Option müssen Sie esproposal.class_static_fields=enable wit aktivieren Hin die [options] Abschnitt Ihrer .flowconfig

Da diese an die JavaScript-Standard einen Vorschlag noch nicht hinzugefügt und in allen Browsern nicht verfügbar ist, werden Sie es auch kompilieren müssen mit so etwas wie Babel (Sie müssen entweder die stage-2 preset oder die transform-class-properties plugin).

Answer 2

Wenn Sie externe Abhängigkeitsinjektion verwenden, möchten Sie vielleicht die Funktionen wie folgt verknüpfen.

Können Sie bitte Ihren vollständigen Snipper teilen, wenn Sie genau wie oben getan haben?