Flow naar gewone JavaScript — Numio

Wanneer gebruik je dit?

• U verwijdert Flow uit een project en wilt eerst de gewone JavaScript, voordat u besluit of u naar TypeScript wilt verhuizen.
• U moet een door Flow getypt fragment op een plaats plakken die alleen standaard JavaScript accepteert, zoals een browserconsole of een codepen.

Hoe werkt het

1. Plak door Flow geannoteerde code (met of zonder de // @flow header) in het Flow-paneel.
2. De code wordt lokaal in je browser geparseerd met de Flow-parser en Babel verwijdert de typen.
3. Kopieer de JavaScript vanaf het uitvoerpaneel.

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

Details en beperkingen

De conversie vindt lokaal plaats in een Web Worker in je browser. Je invoer wordt niet naar een conversieserver verstuurd. De benodigde bibliotheken worden in de browser geladen.

Alleen typen worden verwijderd. Moderne syntaxis zoals JSX, ?? of klassenvelden worden niet getranspileerd.

Het resultaat wordt opnieuw geformatteerd met Prettier (dubbele aanhalingstekens, geen puntkomma's), dus de oorspronkelijke stijl blijft niet behouden en een typecast zoals ({ count: 0 }: State) verliest zijn extra haakjes.

Een // @flow-opmerking die aan een verwijderde typedeclaratie is gekoppeld, wordt daarmee verwijderd.

FAQ

Gerelateerde tools

Specificaties en referenties

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