用 Swagger 自动生成 TypeScript 接口，解放双手，拥抱摸鱼时光！

2023-10-31 01:02:19

在前后端分离盛行的时代，前后端工程师们为了联调接口，常常需要花费大量的时间和精力。而对于那些使用 TypeScript 语言开发的前端项目来说，编写请求接口更是繁琐且枯燥。但别担心，技术的发展总能带来新的惊喜！今天，我们就来聊聊如何利用 Swagger 自动生成 TypeScript 接口，让你的摸鱼时间不再受阻碍！

为何选择 Swagger？

Swagger 是一款开源的 API 文档生成工具，它可以帮助我们轻松地创建、查看和共享 API 文档。同时，Swagger 还提供了一系列强大的功能，包括：

生成可读性强的 API 文档
支持 OpenAPI 规范，保证接口的标准化
提供代码生成功能，支持多种语言

Swagger 自动生成 TypeScript 接口

现在，让我们看看如何使用 Swagger 自动生成 TypeScript 接口：

安装 Swagger Codegen CLI

npm install -g swagger-codegen-cli

初始化 Swagger 项目

swagger-codegen init

配置 Swagger CLI

编辑 config.json 文件，添加以下内容：

{
  "swagger-generator": {
    "typescript-angular": {
      "className": "PetApi",
      "typescriptThreePlus": true
    }
  }
}

生成 TypeScript 接口

swagger-codegen generate

查看生成的代码

在 petstore-typescript-angular 文件夹中，你会找到生成的 TypeScript 接口代码。

使用生成的 TypeScript 接口

生成的 TypeScript 接口可以帮助你快速编写请求代码，只需遵循以下步骤：

导入生成的 TypeScript 接口
创建一个新的 HTTP 客户端
使用接口中的方法发送请求
处理响应

举个例子

以下是使用生成的 TypeScript 接口发送请求的一个示例：

import { PetApi } from './petstore-typescript-angular/api/PetApi';

const petApi = new PetApi();

petApi.getPetById(1).subscribe((pet) => {
  console.log(pet);
});