解放双手！通过 genapi 直接生成 API 代码和类型注释。

Mr_Mao2023-11-10 14:31

在日常的前端开发中，从不会缺少与后端的对接，在这个阶段总会少不了和后端接口的 api 编写，容易出错不说，和后端掰头结果发现是自己参数写错的情况也不计少数。

简介

genapi 通过 Swagger OpenApi（v2~v3），如果你的后端使用 Swagger 展示文档，那么相对应的，你也可以用于生成接口与类型注释。genapi 目前支持多种请求库的生成（axios、fetch、ky、got、ofetch）你可以根据你的需求安装。

swag-axios-ts
swag-axios-js
swag-fetch-ts
swag-fetch-js
swag-ky-ts
swag-ky-js
swag-got-js
swag-got-js
swag-ofetch-js
swag-ofetch-js

生成效果：

使用

在项目文件夹中本地安装：

sh 复制代码

pnpm add @genapi/cli @genapi/swag-axios-ts -D
# Or Yarn
yarn add @genapi/cli @genapi/swag-axios-ts --dev

接下来首先我们得找到后端的 swagger 文档地址（一般都会部署）

打开 F12，在 Network 中找到请求接口 JSON API 的地址：

在你的项目目录中创建 genapi.config.ts 文件，并添加以下内容：

ts 复制代码

import { defineConfig } from '@genapi/config'

const config = defineConfig({
  pipeline: 'swag-ofetch-ts',
  input: 'https://petstore.swagger.io/v2/swagger.json',
  output: 'src/apis/index.ts',
})

export default config

执行生成脚本：

sh 复制代码

pnpm genapi

小结

通过 genapi 可以减少日常开发中编写 api 的重复工作，可以让你专注于业务的实现，提高开发效率！

genapi 还支持更多用例，具体在 github 项目主页页中查看。