typescript 错误提示-基于TypeScript和swagger前端文档的智能插座提示和校准

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文是对下一篇文章的深入研究和继续探索。

下一篇文章通过函数重载，让TypeScript能够智能提示和校准。 在实践中，发现了很多问题：

对于函数重载，typesripe会提示多次重载，并且很难区分多次重载的参数。 如果参数输入错误，后续的提示将不友好； 生成代码非常困难，会生成很多格式代码。 减少生成的文件大小。

本文讨论通过形式参数和统一套接字类型进行提示和校准的可能性。 通过观察swagger和openapi的json文档定义，我们发现可以让typescript的接口文档与swagger的定义格式类似。 请求地址可以直接包含swagger定义的地址，请求参数分为path、query、body来区分不同的。 参数position，response定义socket返回类型等。然后通过typescript工具函数和类库，定义socket请求函数，最终实现标定和提示的功能。 具体步骤我们稍后开始。

首先定义一个统一的socket配置类型。 以请求链接地址为key，以类型定义请求方法、参数和socket返回。 代码如下：

// swagger.ts
export interface SwaggerInterface1 {
    "/api/login": {
        post: {
            param: { body: { username: string; password: string; grant_type: string } };
            response: { token: string; expire_in: number; refresh_token: string };
        };
    };
    "/api/user/{id}": {
        get: {
            param: { path: { id: string } };
            response: { id: string; name: string };
        };
    };
    "/api/user/{id}/friends": {
        get: {
            param: {
                path: { id: string };
                query: { name: string; age: number };
            };
            response: { id: string; name: string };
        };
    };
}

定义效用函数

// swagger.utils.ts
import { SwaggerInterface1 } from "swagger.ts";
// 多个接口定义可以合并到一起
type SwaggerInterface = SwaggerInterface1;
// 对于一些统一的返回接口，可以通过这样的方式将没必要的统一格式类型拆开得到需要用到的格式
// 这样处理后在接口请求函数里面也需要进行拆分处理
type ReturnDataType = { code: number; data: any; message: string };
type ReturnData<T extends ReturnDataType | any> = T extends ReturnDataType ? T["data"] : T;
export type UrlKey = keyof SwaggerInterface;
export type MethodKey<U extends UrlKey> = string & keyof SwaggerInterface[U];
type SwaggerInterfaceSingle<U extends UrlKey, M extends MethodKey> = SwaggerInterface[U][M];
type SwaggerField<U extends UrlKey, M extends MethodKey> = keyof SwaggerInterfaceSingle;
type SwaggerFieldType<U extends UrlKey, M extends MethodKey, F extends SwaggerField> = SwaggerInterfaceSingle[F];
export type Param<U extends UrlKey, M extends MethodKey> = SwaggerFieldType<U, M, "param" & SwaggerField>;
export type Response<U extends UrlKey, M extends MethodKey> = ReturnData<SwaggerFieldType<U, M, "response" & SwaggerField>>;

// fetch.ts
import { UrlKey, MethodKey, Param, Response } from "swagger.utils.ts";
function customFetch<U extends UrlKey, M extends MethodKey>(url: U, method: M, params: Param): Promise<Response> {
    let { path, query, body } = (params || {}) as { path?: any; query?: any; body?: any };
    let iUrl = url as string;
    // 处理url path
    if (path) iUrl = mergeUrlParam(url, path);
    // 处理url query
    if (query) iUrl = mergeUrlQuery(url, query);
    return fetch(iUrl, { method, body: body })
        .then((res) => res.json())
        .then((res) => {
            if (res.code == 200) {
                return res.data;
            }
            return res
        });
}
interface PathParams {
    [key: string]: string | number | boolean;
}
function mergeUrlParam(url: string, paths: PathParams): string {
    // merge code
    return "";
}
function mergeUrlQuery(url: string, query: PathParams): string {
    // merge code
    return "";
}