Utilo

OpenAPI 转 Mock 与 TS

粘贴 OpenAPI 3 或 Swagger 2 文档(JSON 或 YAML),为每个接口生成逼真的 Mock 响应、TypeScript 接口和带类型的 fetch 客户端,全程在浏览器中完成。

这个OpenAPI工具的功能

前端工作往往在后端准备好之前就开始,并且手写已经具备规范的API类型是浪费的努力。粘贴一个OpenAPI 3.x或Swagger 2.0文档在JSON或YAML中,这个工具会生成三个东西:每次操作的模拟响应,所有方案的TypeScript类型,以及一个小类型的** fetch客户端**,每个端点都有一个函数。所有的内容都是在浏览器中生成的,所以私人或内部API规格永远不会上传。

使用方法

  1. 粘贴您的规格或上传文件。接受JSON和YAML。
  2. 终点列表显示每个操作及其方法和路径。
  3. 打开 模拟数据 选项卡,选择操作,以查看从模式示例,格式和编号构建的样本响应。
  4. 在 components/schemas (或 Swagger 2 中 definitions) 生成的接口中切换到 TS类型
  5. 切换到 TS客户端,以便使用现成的客户端,并将其复制到您的项目中。

模仿是如何产生的

  • 规格中的example和examples值总是赢。
  • enum选择第一个值;default被尊重。
  • 字符串格式产生可信的值:email,uuid,date-time,uri,ipv4等。
  • 属性名称提供提示,所以name,price或createdAt看起来很现实。
  • $ref,allOf,oneOf和anyOf被解决;递归引用被安全切断。
  • 模拟是对操作的决定性,所以它们不会在每次更新时改变。

使用生成的客户端

客户端输出一个BASE_URL常数和一个异步函数,以其operationId命名 (或缺失时的方法和路径),带有键入路径参数,查询参数和请求体,返回键入的响应。它只依赖于fetch,所以它可以在浏览器,Node 18+,Deno和Bun中运行。

常见问题

支持哪些规格版本?

开放API3.0和3.1,加上Swagger2.0。没有获取指向其他文件或URL的外部$ref;首先捆绑您的规范 (例如redocly bundle)。

我可以从这里运行模拟服务器吗?

您可以将其复制到MSW处理器,具或故事书中。对于运行模拟服务器,Prism 等工具可以使用相同的规格。

这与openapi-typescript有什么不同?

对于在生产管道中的生产代码,专用CLI非常好。这种工具是用于快速,无需安装的探索和原型。

我的规格上传了吗?

没有。解析和生成是完全本地化的。

安全。所有处理都通过 JavaScript、Web Worker 和浏览器 API 在本地完成,你输入、粘贴或上传的任何内容都不会发送到我们的服务器。

本页内容由英文自动翻译而来,如发现错误,欢迎告诉我们。