前言
在当前的前端开发中，经常需要与后端进行数据交互。而 Swagger 是一种常用的 API 开发工具，它可以帮助我们描述 Web API，生成客户端 SDK 和文档。而 swagger2-ts-codegen 是一款可以将 Swagger 定义自动生成 TypeScript 代码的 npm 包。本文将详细介绍 swagger2-ts-codegen 的使用方法。
安装
安装 swagger2-ts-codegen 最简单的方法是通过 npm：
npm install -g swagger2-ts-codegen
使用方法
首先需要准备一个 Swagger 定义文件，可以是本地的 JSON 文件或者是在线的 Swagger API。
例如以下的 Swagger API，可以在浏览器中直接访问：https://petstore.swagger.io/v2/swagger.json
在终端中使用命令行，将 Swagger 定义文件转换为 TypeScript 代码：
swagger2-ts-codegen -i https://petstore.swagger.io/v2/swagger.json -o ./src/api
参数说明：
-i表示输入的 Swagger 定义文件-o表示输出的目录
生成的 TypeScript 代码将保存在
-o指定的目录下，可以在项目中直接使用它们。
TypeScript 代码说明
以 PetStore Swagger API 为例，生成的 TypeScript 代码包含以下文件：
index.ts：包含了所有的 HTTP 请求方法models.ts：包含了所有的 Swagger 模型-- -------------------- ---- ------- ------ --------- --- - --- ------- ----- ------- ---------- --------- ------ ------ -------- -------------- - ------ --------- ----------- - ------ ------- ------ ------- --------- ------- - -- ------ ------ ---- ------------- - --------- - ------------ ------- - ---------- ---- - ------ -
configuration.ts：包含了 Swagger 客户端的配置文件。export class Configuration { public basePath?: string = 'https://petstore.swagger.io/v2'; }pet.ts：包含了与Pet模型相关的请求方法。-- -------------------- ---- ------- ------ - ------------ ------------------- - ---- --------------------- ----- -------- - --- ------------------------- ------ ----- ------ - ------- ----- ------------ ------------------ ------------ - --------- - ------ - -- -- -- ---- ------ ------------------ - ------ ------- --- --------- --------- --------- ----- ---- -- - ----- ------------ - ---------------------------------- -- -- ---- --- ----- --------------- - --- -- -- --- -- ----- ------------------- - --- ----- --------------- -------------------- - --- -- -- ---- --- -- ------ ------------------------- ------ ------------- -------------------- ---------------- --------------- --------------------- -- - -
示例
使用生成的 TypeScript 代码，可以方便地向 PetStore Swagger API 发送 HTTP 请求。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
------ - ------ - ---- ------------
------ - ------------- - ---- ----------------------
------ - --- - ---- ---------------
----- ---- - --- --------------
-- -- ------- --- -----
-------------------- - ---------------
----- ------ - --- -------------
-- -- -- ----
----- ----------- - ----- ------- -------- ------------ -- -
----- - --------- ---- - - ----- ------------------- ----- ---
-- ---------------- -- --- -- --------------- - ---- -
------ -----
- ---- -
----- --- ---------- -------- ---------------------
-
--总结
Swagger 定义可以为前端项目提供代码自动生成和接口文档等功能。swagger2-ts-codegen 可以帮助将 Swagger 定义自动生成 TypeScript 代码，使项目更加高效和易于维护。从本文中可以学习到 swagger2-ts-codegen 的使用方法，以及如何使用生成的 TypeScript 代码向后端发送 HTTP 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7081e8991b448d8f5a