zoukankan      html  css  js  c++  java
  • 使用 yapitotypescript 生成接口响应数据的 TS 类型声明

    TS 是越写越爽,但是很不爽的是接口响应数据一堆,每次要去手写很麻烦。
    最近正好后端接口文档从一个垃圾工具切换到了 Yapi,然后去搜了下可以通过接口文档自动生成 TS 类型声明,就自己搞了下,还是很简单顺利。

    只需要几步级搞定了:

    安装

    yarn add yapi-to-typescript -D
    

    生成配置文件

    npx ytt init
    

    这里会让你选择生成 ts 还是 js 配置文件,当然选 ts。然后目录下就有了 ytt.config.ts 配置文件。

    配置

    需要让 yapi 管理员告诉你 “设置”里的 “token 设置”里的 token,配置在下面的 token 中。
    由于 yapi 中接口分类名称使用了中文,生成的文件名就会是中文,这样不好。所以使用 pinyin 这个库转为拼音,再转为驼峰式。

    import { camelCase } from 'lodash';
    import { pinyin } from 'pinyin-pro';
    import { defineConfig } from 'yapi-to-typescript';
    
    export default defineConfig([
      {
        serverUrl: 'http://apidoc.xxx.com',  // yapi 首页地址
        typesOnly: true,
        target: 'typescript',
        reactHooks: {
          enabled: false,
        },
        // prodEnvName: 'production',
        outputFilePath: interfaceInfo => {  // 输出路径
          let nameArr: string[] = pinyin(interfaceInfo._category.name, {
            toneType: 'none',
            type: 'array'
          });
          let name = camelCase(nameArr.join('-'));
          // console.log(123, name);
          return `src/types/api/${name}.ts`;
        },
        requestFunctionFilePath: 'src/types/api/request.ts',
        dataKey: 'result',  // 只取接口数据中的 result 字段
        projects: [
          {
            token: 'yapi “设置”里的 “token 设置”里的 token',
            categories: [
              {
                id: 0,
                getRequestFunctionName(interfaceInfo, changeCase) {
                  // 以接口全路径生成请求函数名
                  return changeCase.camelCase(interfaceInfo.path);
    
                  // 若生成的请求函数名存在语法关键词报错、或想通过某个关键词触发 IDE 自动引入提示,可考虑加前缀,如:
                  // return changeCase.camelCase(`api_${interfaceInfo.path}`)
    
                  // 若生成的请求函数名有重复报错,可考虑将接口请求方式纳入生成条件,如:
                  // return changeCase.camelCase(`${interfaceInfo.method}_${interfaceInfo.path}`)
                },
              },
            ],
          },
        ],
      },
    ]);
    

    生成

    npx ytt
    

    当然,我们也可以在 package.json 的 scripts 里面添加命令:

    "scripts": {
      "ytt": "ytt"
    }
    

    就可以使用 yarn ytt 生成了。

    然后就可以开心的使用自动生成的接口类型声明了~

  • 相关阅读:
    对C#中的Close()和Dispose()的浅显理解
    SqlParameter类中的两对好基友:SqlDbType与DbType、SqlValue与Value
    C#通过获取快捷方式指向目标的小示例触碰WMI
    小心UAC
    【TSQL】获取指定日期的常用前后节点(月初月末周一周末等等)
    弹出移动设备时报正在使用肿么办
    再获殊荣!霍格沃兹荣获腾讯金课堂「教育突破奖」
    实战 | 电商业务的性能测试(一): 必备基础知识
    接口测试框架实战(二)| 接口请求断言
    测试老鸟总结的 16 个测试改进 Tips ,让你少走弯路!
  • 原文地址:https://www.cnblogs.com/3body/p/15749362.html
Copyright © 2011-2022 走看看