Convertir Flow a JavaScript — Numio

Cuándo usarla

• Estás quitando Flow de un proyecto y quieres primero el JavaScript plano, antes de decidir si pasar a TypeScript.
• Necesitas pegar un fragmento tipado con Flow en un sitio que solo acepta JavaScript estándar, como la consola del navegador o un codepen.

Cómo usarla

1. Pega código anotado con Flow (con o sin la cabecera // @flow) en el panel Flow.
2. El código se envía a /api/flow-to-javascript, donde recast lo analiza con el parser de Flow y Babel elimina los tipos.
3. Copia el JavaScript del panel de salida.

// @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

Detalles y limitaciones

La página envía tu entrada a una ruta del servidor (/api/flow-to-javascript) para convertirla; no se procesa solo en el navegador. Las rutas API de Next.js aceptan por defecto cuerpos de solicitud de hasta 1 MB.

Solo se eliminan los tipos. La sintaxis moderna como JSX, ?? o los campos de clase no se transpila.

El resultado se reformatea con Prettier (comillas dobles, sin punto y coma), así que no se conserva el estilo original, y un type cast como ({ count: 0 }: State) pierde sus paréntesis sobrantes.

Un comentario // @flow unido a una declaración de tipo eliminada se elimina con ella.

FAQ

Herramientas relacionadas

Especificaciones y referencias

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