flow è un tool che permette di aggiungere annotazioni sui tipi di dato al JavaScript.
Prima di installare flow, si fa notare che le sue annotazioni provocherebbero errore in fase di compilazione, quindi servirà anche uno strumento per rimuovere le annotazioni quando non sono più necessarie. Per questo motivo prima di installare flow si può installare e configurare babel.
Si suggerisce di usare il solito template per il proprio progetto1 , qui allegato per comodità
Spesso babel si trova già installato nei template per React Native.
$ nvm use node $ npm install --save-dev @babel/cli @babel/core @babel/runtime @babel/preset-flow $ npm install --save-dev metro-react-native-babel-preset
Configurazione di Babel va fatta nel file nascosto .babelrc
{ "presets": ["@babel/preset-flow"] }
Questa è l’installazione di flow vero e proprio
Viene suggerito di _non_ usare l’installazione globale.
$ npm install --save-dev flow-bin
La configurazione (se presente) è nel file nascosto .flowconfig
. In questo esempio di configurazione minima si possono leggere delle espressioni regolari nelle prime righe ad indicare di ignorare tutto quello che si trova al di fuori della cartella ./src
[ignore] .*/.* [include] ./src/.* [libs] [options] [lints] [strict]
L’ultima configurazione da modificare è quella del progetto stesso, nel file package.json
{ "name": "progetto", "main": "lib/index.js", "scripts": { "flow": "flow", "build": "babel index.js -d /lib" } .. ..
Mentre si sta lavorando sul codice sorgente, flow può segnalare (nel terminale in cui viene avviato) eventuali problemi con i tipi di dato, e altro. Questo è il comando
$ npm run flow status
Lasciando il terminale aperto, verranno visualizzati al programmatore eventuali nuovi problemi
Il codice sorgente è controllato solo se c’è questo commento:
// @flow
- https://www.cancellino.org/2023/01/react-native-template-4/ [↩]