Convertir Flow en JavaScript — Numio

Quand l’utiliser

• Vous retirez Flow d’un projet et voulez d’abord le JavaScript pur, avant de décider de passer ou non à TypeScript.
• Vous devez coller un extrait typé avec Flow dans un endroit qui n’accepte que du JavaScript standard, comme la console du navigateur ou un codepen.

Mode d’emploi

1. Collez du code annoté avec Flow (avec ou sans l’en-tête // @flow) dans le panneau Flow.
2. Le code est envoyé à /api/flow-to-javascript, où recast l’analyse avec le parser Flow et Babel supprime les types.
3. Copiez le JavaScript depuis le panneau de sortie.

// @flow
import type { Store } from './store';
import { createStore } from './store';

type State = { count: number };

export function first<T>(items: Array<T>): ?T {
  return items.length ? items[0] : null;
}

const store: Store<State> = createStore(({ count: 0 }: State));

export default store;

import { createStore } from "./store"

export function first(items) {
  return items.length ? items[0] : null
}

const store = createStore({
  count: 0,
})

export default store

Détails et limites

La page envoie votre saisie à une route serveur (/api/flow-to-javascript) pour la conversion ; elle n’est pas traitée uniquement dans le navigateur. Par défaut, les routes API de Next.js acceptent des corps de requête jusqu’à 1 Mo.

Seuls les types sont supprimés. La syntaxe moderne comme JSX, ?? ou les champs de classe n’est pas transpilée.

Le résultat est reformaté avec Prettier (guillemets doubles, pas de points-virgules) : le style d’origine n’est pas conservé, et un type cast comme ({ count: 0 }: State) perd ses parenthèses superflues.

Un commentaire // @flow rattaché à une déclaration de type supprimée est supprimé avec elle.

FAQ

Outils associés

Spécifications et références

• @babel/plugin-transform-flow-strip-types