基于 TypeScript 和 swagger 后端文档进行接口智能提示和校验的研究续集

本文探讨了如何利用 TypeScript 的泛型和统一接口类型,结合 Swagger JSON 文档,实现前端接口的智能提示和校验。通过定义统一的接口配置类型,创建工具函数和接口请求方法,将 Swagger 文档转换为 TypeScript 接口文件,从而提高开发效率。然而,实际项目中可能遇到后端接口不规范和生成代码过大的问题。
摘要由CSDN通过智能技术生成

上篇文章使用函数重载的方式让 typescript 得以智能提示和校验,在实践过程中发现存在很多的问题:

1.对于函数重载,typesripe 会提示多个重载,并不好区分多个重载的参数,在参数录入错误,后提示并不友好;
2.生成代码的难度非常的高,会生成很多的格式代码,增加生成文件的大小。

本文讨论通过泛型和统一的接口类型做提示和校验的可能性。经过观察 swagger 和 openapi 的 json 文档定义,发现我们可以将 typescript 的接口文档和 swagger 的定义格式类似,请求地址可以直接包含 swagger 定义的地址,将请求参数拆分为 path、query、body 分别区分不同的参数位置,以及 response 定义接口返回类型等,然后通过 typescript 工具函数和泛型,对接口请求函数进行定义,最终达到校验和提示的作用,那咱们开始具体的步骤。

1.首先定义一个统一的接口配置类型,里面以请求链接地址作为 key,请求方法、参数以及接口返回作为类型进行定义,代码如下:

// 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值