流畅转换：JSON To Flow类型 — Numio

根据 JSON 示例生成以 // @flow 开头的 Flow 类型别名。每个嵌套对象都有自己的导出类型，数组中部分元素缺少的键用 ? 标记为可选。

在仍使用 Flow 的 React 或 React Native 代码库中为 API 响应定义类型。

JSON

Flow

适用场景

在仍使用 Flow 的 React 或 React Native 代码库中为 API 响应定义类型。
在受 Flow 检查的测试套件中为测试数据或 mock 数据编写类型。

使用方法

把 JSON 对象粘贴到编辑器中。
打开设置修改 prefix（默认 I）和 Root Name（默认 RootObject）；根类型变为 IRootObject，嵌套类型使用相同前缀。
把导出的类型复制到保留 // @flow 头部的 .js 文件中。

JSON 输入

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": null,
  "active": true,
  "score": 98.5,
  "tags": ["admin", "dev"],
  "address": { "city": "London", "postCode": "NW1" }
}

Flow 类型

// @flow
export type IRootObject = {
  id: number
  name: string
  email: null
  active: boolean
  score: number
  tags: string[]
  address: IAddress
}
export type IAddress = {
  city: string
  postCode: string
}

功能与限制

在浏览器中通过 json-ts 库运行，结果用 Prettier 格式化；不会上传任何内容。

Flow 没有命名空间，因此页面只提供 prefix 和 Root Name；输出始终是顶层的 export type 声明。

null 值的类型为 null，空数组为 any[]。如果字段可能有值，请改为 ?string 这样的 maybe 类型。

输出使用非精确对象类型，也没有 $ReadOnly；如项目需要，请自行添加 {| |} 或只读包装。

FAQ

如何识别可选字段？

只通过对象数组识别：部分元素缺少的键变为可选，例如 giftWrap?: boolean。顶层键永远不会是可选的，因为单个对象没有其他示例可供比较。

能转换根节点为数组的 JSON 吗？

可以。根节点变为数组别名，例如 export type IRootObject = IRootObjectItem[]，元素类型合并所有元素的键，缺失的键标记为可选。

能处理混合类型数组吗？

能，["a", 2] 这样的扁平数组变为 (string | number)[]。嵌套数组变为 any[]。

规范与参考资料

Flow docs: Objects