使用 openapi 自动生成 ts 请求、类型文件

前言

前端有很多提高我们效率的库，例如今天讲的这个，就能够比较高效的帮我们生成需要的请求的ts文件，能够减少我们不少开发时间，当然前提是，我们的后端代码 swagger 需要写好参数和返回值的文档，否则会生成错误的请求文件

配置和使用

导入 ts-node、@umijs/openapi

//由于只会开发使用，我们导入到 dev 即可
yarn add ts-node @umijs/openapi --dev

在我们的 package.json 中加入 scripts，这样使用的时候就会方便很多

"scripts": {
    ...
    "openapi": "ts-node openapi.config.ts"
},
//直接 yarn openapi 、 npm run openapi 即可更新

在 package.json 同级目录加入 openapi.config.ts 文件，并填写下面信息，按照需要修改

const { generateService } = require("@umijs/openapi");

generateService({
    schemaPath: "http://192.168.1.1:4000/api-docs-json", //文档json地址
    serversPath: "./src/servers", //生成路径和头部导入
    requestLibPath: "import {request} from '../request'",
});

这样就可以使用了...

当我们使用 yarn openapi 时，其会出了按模块生成指定 ts 文件，还会生成一个合并的 index.ts 导入文件，方便我们使用，避免导入时头文件过大，我们使用时直接引入该 index.ts 文件即可

下面是 openapi 的配置参数，可以按照需要改动即可

参数

属性	必填	备注	类型	默认值
requestLibPath	否	自定义请求方法路径	string	-
requestOptionsType	否	自定义请求方法 options 参数类型	string	{[key: string]: any}
requestImportStatement	否	自定义请求方法表达式	string	-
apiPrefix	否	api 的前缀	string	-
serversPath	否	生成的文件夹的路径	string	-
schemaPath	否	Swagger 2.0 或 OpenAPI 3.0 的地址	string	-
projectName	否	项目名称	string	-
namespace	否	命名空间名称	string	API
mockFolder	否	mock目录	string	-
enumStyle	否	枚举样式	string-literal | enum	string-literal
nullable	否	使用null代替可选	boolean	false
dataFields	否	response中数据字段	string[]	-
isCamelCase	否	小驼峰命名文件和请求函数	boolean	true
hook	否	自定义 hook	Custom Hook	-

Custom Hook

属性	类型	说明
afterOpenApiDataInited	(openAPIData: OpenAPIObject) => OpenAPIObject	-
customFunctionName	(data: OperationObject) => string	自定义请求方法路径
customTypeName	(data: OperationObject) => string	自定义函数名称
customClassName	(tagName: string) => string	自定义类型名称
customType	( schemaObject: SchemaObject | undefined, namespace: string, originGetType:(schemaObject: SchemaObject | undefined, namespace: string) => string, ) => string	自定义获取类型 返回非字符串将使用默认方法获取type
customFileNames	( operationObject: OperationObject, apiPath: string, _apiMethod: string, ) => string[]	自定义生成文件名，可返回多个，表示生成多个文件. 返回为空，则使用默认的获取方法获取