使用 yapi-to-typescript 生成接口响应数据的 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 生成了。

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