ts-mock-cli

前端经常在后端接口联调之前需要进行mock数据，对于一个复杂的api接口数据，我们一般会写ts类型数据定义，ts-mock-cli可以通过我们写的ts文件，同时配置类型名称生成我们想要的精准mock数据

1. 安装 & 使用

1pnpm add -D ts-mock-cli

1Usage: tsMock [options]
2
3Options:
4  -v, --version                   当前版本
5  -c, --config <configFilePath>   配置文件 { dist, list: Array<{file, typeNameList}> }>
6  -h, --help                      显示命令帮助

tsMock --config example/confifg.js

2. 配置文件参考

1const path = require('path')
2
3const resolve = (dir) => path.resolve(__dirname, dir)
4
5module.exports = {
6  // 文件输出目录（绝对路径）
7  dist: resolve('../example/schema-json'),
8
9  // 配置列表
10  list: [
11    {
12      // 文件路径（绝对路径）
13      file: resolve('../example/definations/index.ts'),
14
15      // file文件中定义的类型名称列表
16      typeNameList: ['IUser', 'IUserList', 'IPagingResponseData']
17    }
18  ]
19}

3. 生成的文件目录

├── example
  ├── schema-json
    ├── IUser.json
    ├── IUserList.json
    ├── IPagingResponseData.json

4、ts类型定义

更多用法

1export interface IUser {
2  /**
3   * 字符串：长度限制
4   * @minLength 2
5   * @maxLength 10
6   */
7  name: string
8
9  /**
10   * 中文字符串：长度限制；[去我而他与哦怕]{2,10}这种正则实现不起作用
11   * @pattern (?:去|我|而|他|与|哦|怕|是|对|方|过|后|就|哭|了){2,10}
12   */
13  chineseName: string
14
15  /**
16   * 字符串：正则匹配手机号码
17   * @pattern ^1\d{10}$
18   */
19  mobile: string
20
21  /**
22   * 字符串：其他内置格式
23   * 内置格式还有 日期date，时间time，日期时间date-time，主机名hostname，IP地址ipv4，资源标识符uri，正则regex
24   * @format email
25   */
26  email: string
27
28  /** 数字：设置值的范围
29   * @minimum 10
30   * @maximum 100
31   */
32  height: number
33
34  /**
35   * 数字：设置值的范围，10的倍数，模拟时间戳Date.now()
36   * @minimum 1667394203287
37   * @maximum 1668431201403
38   * @multipleOf 10
39   */
40  timestamp: number
41
42  /**
43   * 简单数组
44   */
45  numArray: Array<number>
46
47  /**
48   * 元组
49   */
50  tupleArray: [
51    string,
52    number,
53    boolean
54  ]
55
56  /**
57   * otherInfo 对象成员必须有一个是固定，否则生成的成员名及值可能都是随机
58   */
59  otherInfo: {
60    /**
61     * 字符串：正则匹配身份证号码
62     * @pattern ^\d{15}$|^\d{17}(\d|x|X)$
63     */
64    idCard: string
65    hobby?: '音乐' | '电影' | '篮球' | '足球' | '羽毛球'
66    /**
67     * @minimum 2
68     * @maximum 100
69     */
70    familyMembers?: number
71  },
72}
73
74/**
75 * 每页请求数
76 * @minItems 20
77 * @maxItems 20
78 */
79export type IUserList = IUser[]
80
81/**
82 * 分页响应数据
83 */
84export interface IPagingResponseData {
85  records: IUserList,
86  /**
87   * 总条数
88   * @minimum 100
89   * @maximum 100
90   */
91  total: number
92}

PS：如果你的ts文件中使用到了全局声明文件中的类型，可以使用三斜线指令，这里有一个好处如果tsMock失败，说明ts全局声明文件存在问题，可以帮助我们发现问题