Flow를 일반 JavaScript로 변환 — Numio

이럴 때 사용하세요

• 프로젝트에서 Flow를 걷어내는 중이고, TypeScript로 옮길지 정하기 전에 먼저 일반 JavaScript를 얻고 싶을 때.
• Flow 타입이 붙은 코드 조각을 브라우저 콘솔이나 codepen처럼 표준 JavaScript만 받는 곳에 붙여 넣어야 할 때.

사용 방법

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)로 전송되며, 브라우저에서만 처리되지 않습니다. Next.js API 라우트는 기본적으로 최대 1 MB의 요청 본문을 받습니다.

타입만 제거됩니다. JSX, ??, 클래스 필드 같은 최신 문법은 트랜스파일되지 않습니다.

결과는 Prettier로 다시 포맷되므로(큰따옴표, 세미콜론 없음) 원래 스타일은 유지되지 않으며, ({ count: 0 }: State) 같은 타입 캐스트는 불필요한 괄호가 사라집니다.

제거되는 타입 선언에 붙어 있던 // @flow 주석도 함께 제거됩니다.

FAQ

관련 도구

사양 및 참고 자료

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