我写了个yapi 转化前端ts请求接口的代码,真的很好用

YAPI-TS-GEN 使用指南

简介

YAPI-TS-GEN 是一个强大的 TypeScript 代码生成工具,专门用于将 YAPI 接口文档转换为 TypeScript 类型定义和 API 请求函数。它能够大大提高前端开发效率,确保 API 调用的类型安全。

主要功能

  1. 自动生成 TypeScript 接口定义
  2. 自动生成 API 请求函数
  3. 支持自定义请求函数
  4. 提供完整的类型提示和类型检查

安装方法

你可以使用 npm 或 yarn 安装:

bash 复制代码
# 使用 npm
npm install yapi-ts-gen --save-dev

# 使用 yarn
yarn add yapi-ts-gen -D

使用步骤

1. 初始化配置文件

首先,运行以下命令生成配置文件:

bash 复制代码
npx yapi-ts-gen -i

这将在你的项目根目录创建一个 yapi.config.js 文件。

2. 配置项目信息

打开 yapi.config.js 文件,配置你的 YAPI 项目信息:

javascript 复制代码
const config = [
  {
    // YAPI 导出地址(替换为你的 YAPI 地址)
    "yapiUrl": "http://your-yapi-domain/api/open/plugin/export-full?type=json&pid=your-project-id&status=all&token=your-token",
    
    // 生成文件的输出目录
    "outputDir": "./src/api",
    
    // 生成的文件名
    "outputFileName": "api.ts",
    
    // 生成代码的命名空间
    "namespace": "API",
    
    // 需要从 API 路径中移除的前缀
    "stripPathPrefixes": [
      "api",
      "v1",
      "v2"
    ],
    
    // 请求工具的导入路径
    "requestImportPath": "@/utils/request"
  }
];

module.exports = config;

3. 生成代码

配置完成后,运行以下命令生成 TypeScript 代码:

bash 复制代码
npx yapi-ts-gen -g

配置说明

  • yapiUrl: YAPI 项目的导出地址,需要包含项目 ID 和 token
  • outputDir: 生成的文件存放目录
  • outputFileName: 生成的文件名
  • namespace: 生成代码的命名空间,用于组织 API 定义
  • stripPathPrefixes: 需要从 API 路径中移除的前缀,用于简化生成的函数名
  • requestImportPath: 请求函数的导入路径,用于自定义请求实现

使用生成的代码

生成的代码会包含:

  1. 接口请求参数的类型定义
  2. 接口响应数据的类型定义
  3. 类型安全的 API 请求函数

示例:

typescript 复制代码
// 生成的代码可以这样使用
import { API } from './src/api/api';

// 调用接口(带完整的类型提示)
const response = await API.getUserInfo({ userId: 1 });

注意事项

  1. 确保你有正确的 YAPI 访问权限和 token
  2. 生成代码前请确保配置文件的路径正确
  3. 建议将生成的代码加入到 .gitignore 中,因为它们是自动生成的

更新和维护

当 YAPI 接口发生变化时,只需要重新运行生成命令即可更新代码:

bash 复制代码
npx yapi-ts-gen -g

这样就能保持前端代码与后端接口的同步更新。

相关推荐
mCell6 小时前
Lua 编程入门:从基础语法到元表
javascript·算法·lua
伟大的兔神6 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
fangzhanpeng1689 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript
码艺-Alimjan11 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
xixiaoyunya12 小时前
JavaScript 异步编程全解析:从回调地狱到 async/await 的演进之路
开发语言·javascript·ecmascript
张元清12 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
Sayai12 小时前
【无标题】ECharts 实现日志量异常检测:基线 ±Kσ 基带 + 灵敏度切换(Vue2 实战)
前端·javascript·echarts
默_笙14 小时前
💌 为了把"主题色"传给孙子组件,我翻了五层楼——直到遇见了 useContext
前端·javascript
小KK_14 小时前
JS 事件循环从小白视角入门:宏任务、微任务与 async/await 一网打尽
前端·javascript
kisshyshy15 小时前
从 useRef 到 Web Worker:理解 React 可变对象与浏览器多线程
前端·javascript·react.js