PropTypes vs. Flow reagieren

PropTypes und Flow decken ähnliche Dinge ab, verwenden jedoch unterschiedliche Ansätze. PropTypes kann Sie zur Laufzeit warnen. Dies kann hilfreich sein, um fehlerhafte Antworten von einem Server usw. schnell zu finden. Flow scheint jedoch die Zukunft zu sein und ist mit Konzepten wie Generika eine sehr flexible Lösung. Auch die von Nuclide angebotene Autovervollständigung ist ein großes Plus für Flow.

Meine Frage ist nun, welcher Weg der beste ist, wenn Sie ein neues Projekt starten. Oder könnte es eine gute Lösung sein, sowohl Flow als auch PropTypes zu verwenden? Das Problem bei der Verwendung von beiden ist, dass Sie viel doppelten Code schreiben. Dies ist ein Beispiel für eine Musik-Player-App, die ich geschrieben habe:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Beide Definitionen enthalten grundsätzlich die gleichen Informationen. Wenn der Datentyp geändert wird, müssen beide Definitionen aktualisiert werden.

Ich habe dieses Babel-Plugin gefunden , um Typdeklarationen in PropTypes zu konvertieren, was eine Lösung sein könnte.

Ein Jahr nachdem ich diese Frage gestellt hatte, wollte ich ein Update über meine Erfahrungen mit diesem Problem geben.

Da sich Flow stark weiterentwickelt hat, habe ich angefangen, meine Codebasis damit zu tippen, und keine neuen PropType-Definitionen hinzugefügt. Bisher denke ich, dass dies ein guter Weg ist, da Sie, wie oben erwähnt, nicht nur Requisiten, sondern auch andere Teile Ihres Codes eingeben können. Dies ist sehr praktisch, wenn Sie beispielsweise eine Kopie Ihrer Requisiten im Status haben, die vom Benutzer geändert werden kann. Auch die automatische Vervollständigung in IDEs ist ein großartiger Gewinn.

Automatische Wandler in die eine oder andere Richtung hoben nicht wirklich ab. Für neue Projekte würde ich jetzt wirklich empfehlen, Flow over PropTypes zu verwenden (falls Sie die Eingabe nicht zweimal durchführen möchten).

Abgesehen von beiden, die zum sehr weiten Bereich der Typprüfung gehören, gibt es zwischen beiden keine große Ähnlichkeit.

Flow ist ein statisches Analysetool, das eine Obermenge der Sprache verwendet, mit der Sie Ihrem gesamten Code Typanmerkungen hinzufügen und beim Kompilieren eine ganze Klasse von Fehlern abfangen können.

PropTypes ist eine grundlegende Typprüfung, die auf React gepatcht wurde. Es kann nichts anderes als die Typen der Requisiten überprüfen, die an eine bestimmte Komponente übergeben werden.

Wenn Sie eine flexiblere Typüberprüfung für Ihr gesamtes Projekt wünschen, sind Flow / TypeScript die richtige Wahl. Solange Sie nur kommentierte Typen an Komponenten übergeben, benötigen Sie keine PropTypes.

Wenn Sie nur die Requisitentypen überprüfen möchten, komplizieren Sie den Rest Ihrer Codebasis nicht zu stark und wählen Sie die einfachere Option.

Ich glaube, der verpasste Punkt hier ist, dass Flow ein statischer Prüfer ist, während PropTypes ein Laufzeitprüfer ist , was bedeutet

• Flow kann beim Codieren Fehler vorab abfangen: Es können theoretisch einige Fehler übersehen werden, von denen Sie nichts wissen (wenn Sie beispielsweise Flow nicht ausreichend in Ihrem Projekt implementiert haben oder bei tief verschachtelten Objekten).
• PropTypes werden sie beim Testen stromabwärts abfangen, sodass sie niemals fehlen

Versuchen Sie, die Art der Requisiten nur mit Flow zu deklarieren. Geben Sie einen falschen Typ an, z. B. Nummer anstelle von Zeichenfolge. Sie werden sehen, dass dies in Code markiert wird, der die Komponente in Ihrem Flow-fähigen Editor verwendet. Dies führt jedoch nicht dazu, dass Tests fehlschlagen und Ihre App weiterhin funktioniert.

Fügen Sie nun die Verwendung von React PropTypes mit einem falschen Typ hinzu. Dies führt dazu, dass Tests fehlschlagen und in der Browserkonsole markiert werden, wenn die App ausgeführt wird.

Auf dieser Grundlage sollten anscheinend auch PropTypes angegeben werden, wenn Flow verwendet wird.