通用语言:Flow To 纯JavaScript — Numio
使用 Babel 的 flow-strip-types 插件去除 Flow 类型注解,得到普通 JavaScript。仅类型导入和类型别名会被删除,之后页面会用 Prettier 格式化结果。
你正在从项目中移除 Flow,想先得到普通 JavaScript,再决定是否迁移到 TypeScript。
Flow
JavaScript
处理在浏览器本地完成,输入内容不会上传。输入可能在同一标签页的工具之间保留,共用设备用完后请清空。
适用场景
- 你正在从项目中移除 Flow,想先得到普通 JavaScript,再决定是否迁移到 TypeScript。
- 你需要把带 Flow 类型的代码片段粘贴到只接受标准 JavaScript 的地方,例如浏览器控制台或 codepen。
使用方法
- 将带 Flow 注解的代码(有无 // @flow 头均可)粘贴到 Flow 面板。
- 代码会提交到 /api/flow-to-javascript,由 recast 用 Flow 解析器解析,再由 Babel 移除类型。
- 从输出面板复制 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 或新语法,你的运行环境或打包工具仍需支持它们。