跳到主要内容

通用语言:Flow To 纯JavaScript — Numio

使用 Babel 的 flow-strip-types 插件去除 Flow 类型注解,得到普通 JavaScript。仅类型导入和类型别名会被删除,之后页面会用 Prettier 格式化结果。

你正在从项目中移除 Flow,想先得到普通 JavaScript,再决定是否迁移到 TypeScript。

Flow

JavaScript

适用场景

  • 你正在从项目中移除 Flow,想先得到普通 JavaScript,再决定是否迁移到 TypeScript。
  • 你需要把带 Flow 类型的代码片段粘贴到只接受标准 JavaScript 的地方,例如浏览器控制台或 codepen。

使用方法

  1. 将带 Flow 注解的代码(有无 // @flow 头均可)粘贴到 Flow 面板。
  2. 代码会提交到 /api/flow-to-javascript,由 recast 用 Flow 解析器解析,再由 Babel 移除类型。
  3. 从输出面板复制 JavaScript。

Flow

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

JavaScript

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

会保留 JSX 吗?

会。JSX 会被解析并原样保留,因此运行结果时仍需要 JSX 转换。

import type 语句会怎样?

会被完全删除。普通导入保持不变。

输出需要 Flow 或 Babel 才能运行吗?

不需要 Flow。如果输入使用了 JSX 或新语法,你的运行环境或打包工具仍需支持它们。

规范与参考资料