快速上手

安装 api-typing

pnpm i api-typing

设置更新类型的脚本

在package.json的scripts字段中添加如下内容

"get-types": "get-types \"https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore-expanded.json\" \"./api-typing-meta.d.ts\""

你的package.json整体预览解析

{
  "name": "api-typing",
  "version": "0.1.1",
  "description": "Axios based HTTP client with type hint",
  "scripts": {
    "get-types": "get-types @arg1 @arg2"
  },
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {}
}

脚本参数	类型	必须	默认值
@arg1(你项目的 openapi 的 json 导出地址)	string (http 或 https 链接)	是	无
@arg2(生成的 ts 类型文件名)	string	否	api-typing-meta.d.ts

注意这里的@arg1 和@arg2 都要使用""包裹起来，两个参数中间是有空格的。

这里提供两种常用的 openapi json(@arg1) 文档的地址获取方式

1. 如果后端项目用了 swagger 可以在 swagger-ui 的页面中找到

2. 如果项目用的 apifox 则 openapi 的导出路径打开方式为项目设置 > 导出数据 > 打开URL

   ​

执行 get-types

在终端中运行以下命令

pnpm run get-types

然后检查项目的根目录有没有生成 api-typing-meta.d.ts，如果没有请检查上一步是否出错。

配置 tsconfig.json

确保 api-typing-meta.d.ts 在根目录成功生成后，将该文件添加到 tsconfig.json 的 include 字段中

tsconfig.json

{
  "include": ["api-typing-meta.d.ts"]
}

开始使用吧

import { createHTTPClient } from "api-typing"
// 这里createHTTPClient生成的是继承自 axios instance 的实例，你可以像使用axios一样添加你自己的interceptor
createHTTPClient({ baseURL: "your baseURL" })
  // post 的 url无需手动填写，会根据你的项目自动提示可用的url，其他的请求方式同理
  .post("choose/url/with/hint", {
    /**
     * 入参也会自动提示
     */
  })
  .then((d) => {
    /**
     * 这里的d同样继承自axiosresponse，d.data为接口返回的数据
     */
  })