Конвертировать Flow в чистый JavaScript — Numio

Когда пригодится

• Вы убираете Flow из проекта и сначала хотите получить чистый JavaScript, прежде чем решать, переходить ли на TypeScript.
• Нужно вставить фрагмент с типами Flow туда, где принимается только стандартный JavaScript, например в консоль браузера или codepen.

Как пользоваться

1. Вставьте код с аннотациями Flow (с заголовком // @flow или без него) в панель Flow.
2. Код отправляется на /api/flow-to-javascript, где recast разбирает его парсером Flow, а Babel удаляет типы.
3. Скопируйте JavaScript из панели вывода.

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

Подробности и ограничения

Страница отправляет ваши данные на серверный маршрут (/api/flow-to-javascript) для конвертации; они обрабатываются не только в браузере. API-маршруты Next.js по умолчанию принимают тело запроса размером до 1 МБ.

Удаляются только типы. Современный синтаксис вроде JSX, ?? или полей классов не транспилируется.

Результат переформатируется через Prettier (двойные кавычки, без точек с запятой), поэтому исходный стиль не сохраняется, а приведение типа вроде ({ count: 0 }: State) теряет лишние скобки.

Комментарий // @flow, привязанный к удалённому объявлению типа, удаляется вместе с ним.

FAQ

Похожие инструменты

Спецификации и справка

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