脚手架 + Yapi：用 TypeScript 来快速构建项目脚手架

2023-03-03 03:24:00

使用脚手架从 Yapi 文档自动生成 TypeScript 接口文件

背景

在前端开发中，我们经常需要使用后端提供的接口来获取或提交数据。为了方便使用，我们可以使用 TypeScript 来定义接口类型。然而，如果后端使用 Yapi 来生成接口文档，我们就需要手动根据文档编写 TypeScript 接口文件，这不仅耗时费力，还容易出错。

解决方案：使用脚手架

脚手架是一种可以帮助我们快速生成代码的工具。它可以根据我们提供的模板来生成代码，从而节省我们大量的时间和精力。借助脚手架，我们可以从 Yapi 文档自动生成 TypeScript 接口文件。

安装脚手架

首先，我们需要使用 npm 安装脚手架：

npm install -g yapi-ts-generator

配置脚手架

在使用脚手架之前，我们需要先配置脚手架。我们可以通过在项目根目录下创建一个名为 .yapi-ts-generator.json 的配置文件来配置脚手架：

{
  "yapiURL": "http://localhost:3000",
  "outputDir": "src/api",
  "template": "default"
}

yapiURL: Yapi 文档的 URL。
outputDir: TypeScript 接口文件的输出目录。
template: TypeScript 接口文件的模板。

使用脚手架

配置好脚手架之后，我们就可以使用脚手架来生成 TypeScript 接口文件了。我们可以通过在命令行中执行以下命令来生成 TypeScript 接口文件：

yapi-ts-generator

执行此命令后，脚手架就会根据 .yapi-ts-generator.json 配置文件中的设置来生成 TypeScript 接口文件。

代码示例

以下是一个使用脚手架自动生成的用户接口的示例代码：

// src/api/user.ts
import { API } from './API';

export class UserAPI extends API {
  /**
   * 获取用户列表
   * @param params 请求参数
   */
  public getUserList(params: { page: number; size: number }): Promise<Response<PageResult<User>>> {
    return this.get('/users', params);
  }

  /**
   * 获取用户详情
   * @param id 用户 ID
   */
  public getUserDetail(id: number): Promise<Response<User>> {
    return this.get(`/users/${id}`);
  }

  /**
   * 创建用户
   * @param data 用户数据
   */
  public createUser(data: User): Promise<Response<User>> {
    return this.post('/users', data);
  }

  /**
   * 更新用户
   * @param id 用户 ID
   * @param data 用户数据
   */
  public updateUser(id: number, data: User): Promise<Response<User>> {
    return this.put(`/users/${id}`, data);
  }

  /**
   * 删除用户
   * @param id 用户 ID
   */
  public deleteUser(id: number): Promise<Response<void>> {
    return this.delete(`/users/${id}`);
  }
}