使用 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 生成了。

然后就可以開心的使用自動生成的接口類型聲明了~