vite-plugin-swagger2ts

使用流程

1. 安装

# npm i vite-plugin-swagger2ts -D
# or
# yarn add vite-plugin-swagger2ts -D
# or
pnpm add vite-plugin-swagger2ts -D

2. 配置到 vite.config.ts

// vite.config.ts
import ViteSwagger2ts from "vite-plugin-swagger2ts";

export default {
    plugins: [
        ViteSwagger2ts({
            swaggerUrl: "url", // swagger-resources URL
            output: "pathToSave", // not require, default './src/swagger.ts'
            formatSchema: (schema) => {
                // not require, deal with schema. such as unwrapper common response
                if ("properties" in schema) {
                    const properties = schema["properties"];
                    if ("code" in properties && ("msg" in properties || "message" in properties) && "data" in properties) {
                        return properties["data"];
                    }
                }
                return schema;
            }
        })
    ]
};

插件流程

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

interface SwaggerInterface {
    // SwaggerInterface start
    url: {
        get: {
            param: { path: { id: string }; query: { status: number }; body: { name: string } };
            reponse: { id: string; name: string; status: number };
        };
    };
}

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

import { PathsSwaggerInterface } from "./swagger.ts";

export type UrlKey = keyof PathsSwaggerInterface;
export type MethodKey<U extends UrlKey> = string & keyof PathsSwaggerInterface[U];

type SwaggerInterfaceSingle<U extends UrlKey, M extends MethodKey<U>> = PathsSwaggerInterface[U][M];
type SwaggerField<U extends UrlKey, M extends MethodKey<U>> = keyof SwaggerInterfaceSingle<U, M>;
type SwaggerFieldType<U extends UrlKey, M extends MethodKey<U>, F extends SwaggerField<U, M>> = SwaggerInterfaceSingle<U, M>[F];

export type Param<U extends UrlKey, M extends MethodKey<U>> = SwaggerFieldType<U, M, "param" & SwaggerField<U, M>>;
export type Response<U extends UrlKey, M extends MethodKey<U>> = SwaggerFieldType<U, M, "response" & SwaggerField<U, M>>;

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

import type { PathKey, MethodKey, Param, Respone } from "configfile";

export function customFetch<P extends PathKey, M extends MethodKey<P>>(path: P, method: M, params: Param<P, M>): Promise<Respone<P, M>> {
    // custome code
    return "" as any;
}

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

License

MIT License © 2021 morelearn1990