flow

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 progetto¹ , 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

1. https://www.cancellino.org/2023/01/react-native-template-4/ [↩]