vite-plugin-swagger2ts

使用流程

1. 安装

1# npm i vite-plugin-swagger2ts -D
2# or
3# yarn add vite-plugin-swagger2ts -D
4# or
5pnpm add vite-plugin-swagger2ts -D

2. 配置到 vite.config.ts

1// vite.config.ts
2import ViteSwagger2ts from "vite-plugin-swagger2ts";
3
4export default {
5    plugins: [
6        ViteSwagger2ts({
7            swaggerUrl: "url", // swagger-resources URL
8            output: "pathToSave", // not require, default './src/swagger.ts'
9            formatSchema: (schema) => {
10                // not require, deal with schema. such as unwrapper common response
11                if ("properties" in schema) {
12                    const properties = schema["properties"];
13                    if ("code" in properties && ("msg" in properties || "message" in properties) && "data" in properties) {
14                        return properties["data"];
15                    }
16                }
17                return schema;
18            }
19        })
20    ]
21};

插件流程

1. 通过配置的 url 请求 ${baseUrl}/swagger-resources 地址，获取微服务的 resources 地址；
2. 通过 resources 地址请求 swagger 具体文档；
3. 将 swagger 接口生成具体的 typescript 类型:

1interface SwaggerInterface {
2    // SwaggerInterface start
3    url: {
4        get: {
5            param: { path: { id: string }; query: { status: number }; body: { name: string } };
6            reponse: { id: string; name: string; status: number };
7        };
8    };
9}

4. 附加 typescrip 转换模版内容:

1import { PathsSwaggerInterface } from "./swagger.ts";
2
3export type UrlKey = keyof PathsSwaggerInterface;
4export type MethodKey<U extends UrlKey> = string & keyof PathsSwaggerInterface[U];
5
6type SwaggerInterfaceSingle<U extends UrlKey, M extends MethodKey<U>> = PathsSwaggerInterface[U][M];
7type SwaggerField<U extends UrlKey, M extends MethodKey<U>> = keyof SwaggerInterfaceSingle<U, M>;
8type SwaggerFieldType<U extends UrlKey, M extends MethodKey<U>, F extends SwaggerField<U, M>> = SwaggerInterfaceSingle<U, M>[F];
9
10export type Param<U extends UrlKey, M extends MethodKey<U>> = SwaggerFieldType<U, M, "param" & SwaggerField<U, M>>;
11export type Response<U extends UrlKey, M extends MethodKey<U>> = SwaggerFieldType<U, M, "response" & SwaggerField<U, M>>;

5. 将生成的文件保存到项目指定位置，项目通过以下代码进行使用类型提示；

1import type { PathKey, MethodKey, Param, Respone } from "configfile";
2
3export function customFetch<P extends PathKey, M extends MethodKey<P>>(path: P, method: M, params: Param<P, M>): Promise<Respone<P, M>> {
4    // custome code
5    return "" as any;
6}

6. 业务代码通过引用 customFetch 进行使用

License

MIT License © 2021 morelearn1990