静态类型：Flow To TypeScript类型 — Numio

适用场景

• 你正逐个文件把 Flow 代码库迁移到 TypeScript，想为每个模块先做一遍初步转换。
• 需要把旧 React 项目中带 Flow 类型的代码片段粘贴到 TypeScript 代码库中。

使用方法

1. 将 Flow 代码粘贴到 Flow 面板。
2. 代码会提交到 /api/flow-to-typescript，在服务器上用 flow-to-ts 转换；没有任何设置。
3. 复制 TypeScript，保存为 .ts 或 .tsx，然后运行 tsc 修正转换无法处理的部分。

// @flow
import type { Node } from 'react';

export type User = {|
  +id: number,
  name: ?string,
  roles: $ReadOnlyArray<string>,
|};

export function greet(user: User): string {
  return `Hi ${user.name ?? 'guest'}`;
}

export const render = (title: string): Node => null;

import type { Node } from "react"
export type User = {
  readonly id: number
  name: string | null | undefined
  roles: ReadonlyArray<string>
}
export function greet(user: User): string {
  return `Hi ${user.name ?? "guest"}`
}
export const render = (title: string): Node => null

功能与限制

页面会把输入发送到服务器路由（/api/flow-to-typescript）进行转换，并不只在浏览器中处理。Next.js API 路由默认接受最大 1 MB 的请求体。

精确对象类型 {| |} 会失去精确性，因为 TypeScript 没有精确对象；+prop 变为 readonly。

$ReadOnly、$Keys 等 Flow 工具类型会保留原名，并从 npm 包 utility-types 导入，因此需要另行安装该包。

// @flow 指令会被移除，代码会重新输出。Node 等 React 类型导入会按原样保留，需要自行重命名（例如 ReactNode）。

FAQ

相关工具

规范与参考资料

• flow-to-ts on GitHub
• Flow documentation