1. 背景介绍
随着前端开发的不断迭代发展，越来越多的开发者开始使用后端提供的 REST API，在前后端分离的架构下，前端需要对接接口文档，同时也需要对接口数据进行类型检查和格式化处理。而 Swagger 是一种描述 RESTful API 的标准，可以生成相应的文档和代码。swagger-t-str 是一款可将 Swagger Api Schema 转换成 TypeScript 类型定义以及生成数据的库。
2. 安装和使用
2.1 安装
首先需要在项目中安装 swagger-t-str 包，可以使用 npm 命令进行全局安装：
npm install -g swagger-t-str
也可以使用本地安装：
npm install swagger-t-str
2.2 使用
2.2.1 生成 TypeScript 编译后的代码
swagger-t-str 命令行工具提供了以下两种生成 TypeScript 编译后的代码的方式。
- 直接生成并输出到终端
swagger-t-str -i petstore.yaml -m ModelFoo
- 将输出写入指定的文件中
swagger-t-str -i petstore.yaml -m ModelFoo -o foo.module.ts
以上命令会将 petstore.yaml 中的 ModelFoo 构建成 TypeScript 类型定义，并输出到终端或写入指定的文件中，生成的代码类似于：
/* tslint:disable */
export interface ModelFoo {
id: number; // 定义属性名称为 id 的整数类型
name: string; // 定义属性名称为 name 的字符串类型，以下同理
is_vip: boolean;
updated_at: Date;
};2.2.2 生成模拟数据
swagger-t-str 命令行工具提供了以下两种方式生成模拟数据。
- 手动调用
可以将 swagger-t-str 作为库使用，手动调用生成函数生成数据。具体的使用如下：
import { generate } from 'swagger-t-str';
import { ModelFoo } from './foo.model'; // 此处需要自己定义 ModelFoo
const data: ModelFoo = generate({ schema: ModelFoo });- 使用命令行工具生成
swagger-t-str -i petstore.yaml -m ModelFoo -o foo.data.ts --mock
生成的 foo.data.ts 文件中，会包含对 ModelFoo 定义的模拟数据：
import { ModelFoo } from "./foo.model";
export const data: ModelFoo = {
id: 123,
name: "foo",
is_vip: true,
updated_at: new Date()
};3. 示例
以下是生成 petstore.yaml 中的 ApiResponse 的 TypeScript 类型定义以及模拟数据的示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- -- -------------- -- ------ --------- ----------- - ----- ------- ----- ------- -------- ------- -- ----- ----- ----------- - ---------- ------- ----------- --- ------------------ -- ----- -- - ----- ------ ----- ----- --------- -------- --------- ----- ---- -
4. 总结
swagger-t-str 可以将 Swagger Api Schema 快速地转换成 TypeScript 类型定义以及生成数据。在前端项目中与 Swagger 集成起来，可以帮助前端开发者更好的对接 REST API 接口，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553ea81e8991b448d13d5