太Out了！2025年前端写接口还从swagger复制粘贴吗
原创 cnvoid 极客早班车 2025年04月01日 16:59 广东
小编今天发现了一个神仙前端工具， 能直接将 swagger 文档直接生成可执行的 Typescript代码。
使用 openapi-typescript-cli 快速生成 TypeScript 类型定义
在现代前端开发中，与后端 API 进行交互时，确保数据类型的正确性至关重要。openapi-typescript-cli 是一个开源工具，专门用于从 OpenAPI 规范生成 TypeScript 类型定义，帮助开发者减少手动维护类型的工作量，并提高代码的可维护性和安全性。
项目简介
openapi-typescript-cli 是由 cnvoid(www.zhuty.com) 维护的一个开源 CLI 工具，能够根据 OpenAPI 3 规范自动生成 TypeScript 类型定义。它的核心目标是让前端开发者更方便地与后端 API 进行类型安全的交互。
主要特性
- 自动生成请求层代码：根据 OpenAPI 规范自动生成 TypeScript 请求层代码，减少手动编写的工作量。
- 高内聚、低耦合：生成的代码遵循高内聚、低耦合的设计原则，避免了其他工具可能存在的代码耦合性过高的问题。
- 灵活的参数处理：支持处理
params（路径参数）、data（请求体参数）和query（查询参数），适应不同的 API 调用需求。
安装与使用
安装
你可以使用 npm 或 yarn 进行全局安装，也可以在项目中本地安装：
# 全局安装
npm install -g openapi-typescript-cli
# 或者在项目中安装
npm install --save-dev openapi-typescript-cli
# 使用指南
$ openapi-typescript-cli -h
Usage: openapi-typescript-cli [options]
openapi 生成 api 请求层代码.
推荐在 src/api 目录执行生成代码命令， 生成的代码会在当前目录下生成 api 请求文件.
作者: zhuty.com @2025
Options:
-V, --version output the version number
-f, --apifile <type> api json 文件路径
-u, --url <type> api json文件url地址, 通常为http://domain:port/v3/api-docs
-n, --name <type> 输出文件名称， 默认为 index. 生成文件为 <name>.d.ts, <name>.ts， request.js (default: "index")
-m, --middleware <type> 中间件文件路径， 用于修改生成代码的模块名称和函数名称
-h, --help display help for command
生成 TypeScript 请求代码
安装完成后，你可以使用以下命令从 OpenAPI 规范文件中生成 TypeScript 请求代码：
openapi-typescript-cli -u http://your-api-domain:port/v3/api-docs -n api
其中：
-u指定 OpenAPI 规范的 URL 或本地 JSON/YAML 文件路径。-n指定生成的 API 文件名，如api.ts。
生成的 api.ts 文件将包含所有 API 端点的请求封装，前端开发者可以直接在代码中使用这些封装的方法进行 API 调用。
示例：使用生成的代码调用 API
import { roleManage } from "./api";// 删除角色示例
async function deleteRoleExample() {
const res = await roleManage.deleteRole([1, 2]);
console.log(res);
}
说明：
params：可以通过路径参数（如id）传递。query：可以使用查询参数传递，如?page=1&size=10。data：可以通过requestBody传递 JSON 数据。
适用场景
- 前端与后端解耦：通过 OpenAPI 规范自动生成类型，确保前端代码与后端接口同步。
- 提升开发效率：避免手动编写 API 类型，提高代码复用性。
- 减少类型错误：TypeScript 的类型检查可以在开发阶段发现 API 数据结构的错误。
总结
openapi-typescript-cli 是一个实用的 TypeScript 类型生成工具，能够大幅减少手动维护 API 类型的工作量，并提升前端开发的安全性和效率。对于使用 OpenAPI 规范的前后端分离项目，它是一个值得尝试的工具。
如果你对这个项目感兴趣，可以在 GitHub 上查看它的源码：www.npmjs.com/package/ope…
