Formateur Flow

Formatez votre code JavaScript avec typage statique Flow.

Flow Source

Formatage

Options

Flow Formaté

Guide complet : Typage statique JavaScript avec Flow

Flow : l'alternative de Meta au typage JavaScript

Flow est un vérificateur de types statiques pour JavaScript créé par Meta (anciennement Facebook) en 2014. Contrairement à TypeScript qui est un sur-ensemble de JavaScript avec son propre compilateur, Flow est un outil d'analyse statique qui ajoute des annotations de type au JavaScript standard. Les annotations sont supprimées à la compilation par Babel ou flow-remove-types.

Historiquement, Flow a été le premier choix pour le typage dans l'écosystème React. React lui-même et de nombreuses bibliothèques de Meta utilisent encore Flow en interne. Cependant, TypeScript a largement surpassé Flow en adoption depuis 2018-2019, et même l'équipe React a commencé à publier des types TypeScript officiels.

Pourquoi Flow existe encore

Malgré la domination de TypeScript, Flow a des cas d'usage légitimes :

  • Codebase Meta : Des millions de lignes de code Flow chez Facebook, Instagram, WhatsApp. La migration serait colossale.
  • Analyse plus stricte : Flow peut détecter certaines erreurs que TypeScript laisse passer (notamment sur les objets exacts).
  • Types opaques : Une fonctionnalité unique pour l'encapsulation de types (TypeScript n'a pas d'équivalent direct).
  • Intégration Babel : Flow s'intègre naturellement dans les projets Babel existants.

Syntaxe Flow essentielle

📝 // @flow

Directive obligatoire en haut de chaque fichier pour activer la vérification. Sans elle, Flow ignore le fichier. Variante : // @flow strict pour un mode plus strict.

🏷️ Annotations de type

function greet(name: string): string { ... }. Syntaxe quasi-identique à TypeScript. Fonctionne sur variables, paramètres, retours, propriétés.

📦 Type aliases

type User = { name: string, age: number, ... }. Le , à la fin est une convention Flow (virgule trailing dans les objets).

🔒 Opaque types

opaque type UserId = string;. Le type sous-jacent est caché à l'extérieur du module. Empêche les confusions entre ID de même type sous-jacent.

Types utilitaires spécifiques à Flow

  • $ReadOnly<T> : Rend toutes les propriétés en lecture seule (comme Readonly en TypeScript)
  • $Shape<T> : Rend toutes les propriétés optionnelles (comme Partial en TypeScript)
  • $Exact<T> : Interdit les propriétés supplémentaires (pas d'équivalent direct en TS)
  • $Keys<T> : Union des clés d'un type objet (comme keyof en TypeScript)
  • $Values<T> : Union des valeurs d'un type objet
  • $PropertyType<T, 'key'> : Type d'une propriété spécifique
  • $ElementType<T, K> : Type des éléments d'un array ou objet indexé

Flow vs TypeScript : comparaison honnête

  • Syntaxe : Très similaire (80-90% compatible). Migration possible avec des outils automatiques.
  • Adoption : TypeScript domine massivement (~95% des projets typés). Flow est quasi-exclusif à Meta.
  • Écosystème : DefinitelyTyped pour TS est 10x plus complet que flow-typed.
  • Outillage IDE : VS Code + TypeScript est nettement supérieur à Flow pour l'autocomplétion et le refactoring.
  • Strictesse : Flow peut être plus strict sur certains patterns (objets exacts, variance).

Traitement 100% local : confidentialité garantie

Cet outil utilise js-beautify pour formater votre code Flow. Tout le traitement s'effectue dans votre navigateur — aucun code n'est envoyé à nos serveurs. Vous pouvez formater du code propriétaire en toute confiance.

Questions fréquentes sur Flow

Flow est-il encore maintenu en 2024 ?

Oui, Meta continue activement le développement de Flow car c'est un composant critique de leur infrastructure. Des releases régulières sont publiées sur GitHub.

Cependant :

  • La communauté open source est très réduite comparée à TypeScript
  • Moins de bibliothèques tierces avec types Flow
  • Documentation et tutoriels moins abondants
  • Recrutement : les développeurs Flow sont rares

Recommandation : Pour un nouveau projet, choisissez TypeScript sauf raison spécifique (codebase Flow existante, équipe déjà formée).

Comment migrer de Flow vers TypeScript ?

Outils de migration :

  • flow-to-ts : Conversion automatique de la syntaxe Flow vers TypeScript
  • @khanacademy/flow-to-ts : Version améliorée par Khan Academy

Différences à gérer manuellement :

  • $ReadOnly → Readonly
  • $Shape → Partial
  • $Exact → pas d'équivalent direct (utiliser types explicites)
  • opaque type → pas d'équivalent (utiliser branded types ou classes)
  • Imports de types : import type reste, mais la sémantique peut différer

Stratégie : Migrez fichier par fichier, en commençant par les feuilles de l'arbre de dépendances.

Peut-on utiliser Flow avec React moderne (hooks, Suspense) ?

Oui, Flow supporte toutes les APIs React modernes :

  • Hooks (useState, useEffect, useContext...) avec inférence de type
  • Suspense et lazy loading
  • Server Components (avec types adéquats)

Types React disponibles via :

  • flow-typed : flow-typed install react
  • Types inclus dans Flow pour les APIs les plus courantes

Attention : La documentation React officielle et la plupart des tutoriels utilisent TypeScript. Vous devrez souvent "traduire" mentalement.

Quels sont les avantages uniques de Flow sur TypeScript ?

Fonctionnalités que TypeScript n'a pas (ou différemment) :

  • Opaque types : Encapsulation forte. Un opaque type UserId = string n'est pas assignable depuis un string externe au module. TypeScript nécessite des patterns plus verbeux (branded types).
  • $Exact types : {| name: string |} rejette les propriétés supplémentaires. TypeScript est plus permissif par défaut.
  • Variance explicite : Flow annote explicitement la variance des génériques (+T covariant, -T contravariant).
  • Mode strict par fichier : // @flow strict ou strict-local pour un contrôle granulaire.

En pratique : Ces avantages sont marginaux face à l'écosystème TypeScript. Sauf besoins très spécifiques, TypeScript est le choix pragmatique.

Comment configurer Flow dans un projet ?

Installation :

  • npm install -D flow-bin : Le binaire Flow
  • npx flow init : Crée .flowconfig
  • npx flow : Lance la vérification de types

Suppression des types pour la production :

  • Babel : @babel/preset-flow
  • Sans Babel : flow-remove-types

IDE : Extension "Flow Language Support" pour VS Code. L'expérience est moins riche qu'avec TypeScript.

Mes données sont-elles sécurisées avec cet outil ?

Oui, totalement. Tout le formatage s'effectue dans votre navigateur :

  • js-beautify s'exécute localement en JavaScript
  • Aucune requête réseau n'envoie votre code
  • Votre code Flow ne quitte jamais votre machine
  • L'outil fonctionne même hors ligne une fois la page chargée

Vérifiez dans l'onglet Réseau des DevTools : aucune donnée n'est transmise.