Published on

Yapi 转换为 TypeScript

Authors
  • avatar
    Name
    Magikarp
    Twitter
Table of Contents

序言

在日常开发过程中，如果我们使用到了 Typescript，那么我们经常需要将后端返回的数据类型手动声明一次。

而一般情况下后端都会将接口返回类型（即接口文档）存储在工具中，例如 Yapi, Swagger, OpenAPI 等。那么我们为什么不能直接将接口文档中的类型转换为 Typescript 呢？

所以我们需要解决的核心痛点即为从接口文档直接转换为类型。减去繁琐的机械性重复工作。此处因为公司使用的是 Yapi, 所以将会直接使用 Yapi 作为示范。

yapi-to-typescript

点击我 可以直接前往该仓库的地址。类似的仓库还有 openapi2typescript、openapi-typescript 等，他们的思想都类似，但是着重点不同。

安装

npm i yapi-to-typescript -S

初始化

npx ytt init

配置

重点字段介绍

字段名称字段类型字段说明
serverUrlstringyapi 地址
tokenstringtoken，点我查看图片
projects[number].categories.projectIdnumber项目 id，点我查看图片
export default defineConfig([
  {
    serverUrl: 'https://yapi.mokahr.com/',
    typesOnly: true,
    target: 'typescript',
    // dataKey: 'data',
    projects: [
      {
        token: 'xxx',
        categories: [
          {
            outputFilePath: 'src/api/230700.ts',
            id: 230700,
            getRequestFunctionName(interfaceInfo, changeCase) {
              // 以接口全路径生成请求函数名
              return changeCase.camelCase(interfaceInfo.path)

              // 若生成的请求函数名存在语法关键词报错、或想通过某个关键词触发 IDE 自动引入提示，可考虑加前缀，如:
              // return changeCase.camelCase(`api_${interfaceInfo.path}`)

              // 若生成的请求函数名有重复报错，可考虑将接口请求方式纳入生成条件，如:
              // return changeCase.camelCase(`${interfaceInfo.method}_${interfaceInfo.path}`)
            },
          },
        ],
      },
    ],
  },
])

运行生成代码

npx ytt

相较于 swagger 的缺点

在上次使用 ytt 的过程中，遇到的问题是比较多的，比如枚举、空对象、任意的对象等 ytt 无法良好的描述出来。而使用 openapi2typescipt 或 swagger-to-typescript 则没有这种问题

pont

目前来看 pont 似乎是一个更好的选择，支持编辑器，数据同步，ts，server 生成等。

但是最大的问题在于 yapi 没有 openapi 去进行 swagger 转换，仅有的一个功能是 export-full

Chrome 插件

通过 Chrome 插件的形式将 Yapi 转换为 TS

下载链接：

链接: https://pan.baidu.com/s/1o3xGOayjhnUS4IiCrMIZwA?pwd=hgcv 提取码: hgcv 复制这段内容后打开百度网盘手机 App，操作更方便哦

参考链接

Discuss on Twitter • View on GitHub