YAPI-TS-GEN 使用指南
简介
YAPI-TS-GEN 是一个强大的 TypeScript 代码生成工具,专门用于将 YAPI 接口文档转换为 TypeScript 类型定义和 API 请求函数。它能够大大提高前端开发效率,确保 API 调用的类型安全。
主要功能
- 自动生成 TypeScript 接口定义
- 自动生成 API 请求函数
- 支持自定义请求函数
- 提供完整的类型提示和类型检查
安装方法
你可以使用 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 和 tokenoutputDir
: 生成的文件存放目录outputFileName
: 生成的文件名namespace
: 生成代码的命名空间,用于组织 API 定义stripPathPrefixes
: 需要从 API 路径中移除的前缀,用于简化生成的函数名requestImportPath
: 请求函数的导入路径,用于自定义请求实现
使用生成的代码
生成的代码会包含:
- 接口请求参数的类型定义
- 接口响应数据的类型定义
- 类型安全的 API 请求函数
示例:
typescript
// 生成的代码可以这样使用
import { API } from './src/api/api';
// 调用接口(带完整的类型提示)
const response = await API.getUserInfo({ userId: 1 });
注意事项
- 确保你有正确的 YAPI 访问权限和 token
- 生成代码前请确保配置文件的路径正确
- 建议将生成的代码加入到 .gitignore 中,因为它们是自动生成的
更新和维护
当 YAPI 接口发生变化时,只需要重新运行生成命令即可更新代码:
bash
npx yapi-ts-gen -g
这样就能保持前端代码与后端接口的同步更新。