React PropTypes vs. Flow

PropTypes e Flow coprono cose simili ma utilizzano approcci diversi. PropTypes può darti avvisi durante il runtime, che possono essere utili per trovare rapidamente risposte errate provenienti da un server, ecc. Tuttavia, Flow sembra essere il futuro e con concetti come i generici è una soluzione molto flessibile. Anche il completamento automatico offerto da Nuclide è un grande vantaggio per Flow.

La mia domanda ora è quale sia il modo migliore per iniziare un nuovo progetto. O potrebbe essere una buona soluzione utilizzare entrambi, Flow e PropTypes? Il problema con l'utilizzo di entrambi è che scrivi molto codice duplicato. Questo è un esempio di un'app per lettore musicale che ho scritto:

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

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

Entrambe le definizioni contengono fondamentalmente le stesse informazioni e quando il tipo di dati viene modificato, entrambe le definizioni devono essere aggiornate.

Ho trovato questo plugin babel per convertire le dichiarazioni di tipo in PropTypes, che potrebbe essere una soluzione.

Un anno dopo aver posto questa domanda, volevo fornire un aggiornamento su come le mie esperienze con questo problema.

Dato che Flow si è evoluto molto, ho iniziato a digitare la mia base di codice con esso e non ho aggiunto nuove definizioni PropType. Finora, penso che questo sia un buon modo di procedere, perché come accennato in precedenza, ti consente non solo di digitare oggetti di scena ma anche di altre parti del tuo codice. Questo è molto utile per esempio quando hai una copia dei tuoi oggetti di scena nello stato, che può essere modificata dall'utente. Inoltre, l'auto-completamento negli IDE è un vantaggio straordinario.

I convertitori automatici nell'una o nell'altra direzione non sono decollati davvero. Quindi, per i nuovi progetti, ora consiglierei davvero di usare Flow su PropTypes (nel caso in cui non si desideri eseguire la digitazione due volte).

A parte che entrambi appartengono al campo molto ampio del controllo del tipo, non c'è molta somiglianza tra i due.

Flow è uno strumento di analisi statica che utilizza un superset del linguaggio, che consente di aggiungere annotazioni di tipo a tutto il codice e rilevare un'intera classe di bug in fase di compilazione.

PropTypes è un controllo del tipo di base che è stato patchato su React. Non può controllare nient'altro che i tipi di oggetti di scena passati a un dato componente.

Se desideri un controllo del tipo più flessibile per l'intero progetto, Flow / TypeScript sono le scelte appropriate. Finché si passano solo tipi annotati nei componenti, non sarà necessario PropTypes.

Se vuoi solo controllare i tipi di prop, non complicare eccessivamente il resto del tuo codice base e scegli l'opzione più semplice.

Credo che il punto mancato qui sia che Flow è un controllo statico mentre PropTypes è un controllo di runtime , il che significa

• Il flusso può intercettare gli errori a monte durante la codifica: può teoricamente perdere alcuni errori di cui non sei a conoscenza (se non hai implementato abbastanza flusso nel tuo progetto, ad esempio, o in caso di oggetti nidificati in profondità)
• PropTypes li catturerà a valle durante il test, quindi non li mancherà mai

Prova a dichiarare il tipo di oggetti di scena usando solo Flow. Specificare un tipo errato, ad esempio numero invece di stringa. Vedrai che questo verrà contrassegnato nel codice che utilizza il componente all'interno del tuo editor compatibile con il flusso. Tuttavia, ciò non causerà il fallimento di alcun test e l'app continuerà a funzionare.

Ora aggiungi l'uso di React PropTypes con un tipo errato. Ciò farà sì che i test falliscano e vengano contrassegnati nella console del browser quando l'app viene eseguita.

Sulla base di ciò, sembra che anche se si utilizza Flow, anche PropTypes dovrebbe essere specificato.