接口入参的两中不同定义方法优缺点

我们在写接口请求的时候,前端参数是很多的,而且还不确定此时我们有不同的写法,大家都知道typescript(简称ts)出来后,很多人也在使用,它有严格的类型校验,同时写的时候也会相对耗时间,因为每个参数都要写的,相当于把接口文档参数全写了一遍,但是如果为了后续接口改动,尽量少改动 ,也可以用兼容性的写法

1、如下的第一种,定义了具体的入参
优点:1、接口所有参数等一目了然

2、方便维护,遇到问题更便于定位

缺点:1、 相对来说,写代码更费时间一点,因为要写各种数据及类型定义,tsx中使用到也要去引入保持一致

2、虽然是用的ts,但是相当于没有很好地使用ts类型

2、第二种则没有定义具体的类型,只定义了key是string,然后值可以是任意类型,相当于没有校验入参值的类型,

优点:这种以后接口加减参数,这里不用改动,只要调用时传递对应的参数即可

缺点:1、 没有做严格的数据校验,如果参数类型问题(如:number 、string等接收参数类型问题,)参数多的话,不好定位,或者一些内部数据类型转换报错也不好定位

2、 别人看代码,无法知道这个接口要传递什么参数,需要查看接口文档才可以,相对来说,如果接口文档没有及时更新,后续不好维护,接口依赖于接口文档

总结:(1)如果用ts,建议尽量把参数写具体,便于以后维护
(2)可以引入eslint,让代码更健壮

(3)强烈建议在vscode装一个fittencode插件,对ts飘红等提示非常有用,可以大大提高开发效率

相关推荐
前端小趴菜052 分钟前
vue3-signature实现电子签名
前端·javascript·vue.js
玉米Yvmi5 分钟前
React自定义Hook实战指南:从入门到精通,让你的代码像乐高一样灵活
前端·react.js·面试
董员外16 分钟前
从零实现 AI 编程助手:LangChain.js + ReAct 循环实战
前端·javascript·后端
bluceli17 分钟前
JavaScript BigInt:处理大数值的终极解决方案
前端·javascript
软弹23 分钟前
Vue2、Vue3、React 状态管理全方位对比
前端·javascript·vue.js·react.js
BYWled27 分钟前
告别 Date | JavaScript Temporal API 使用教程
javascript
酉鬼女又兒1 小时前
HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖
前端·javascript·职场和发展·蓝桥杯·html·html5·web
Watermelo6171 小时前
【前端实战】构建 Vue 全局错误处理体系,实现业务与错误的清晰解耦
前端·javascript·vue.js·信息可视化·性能优化·前端框架·设计规范
进击的尘埃2 小时前
Vue 3 编译器宏的编译时魔法:defineModel、defineSlots 与 AST 转换的真相
javascript
不会敲代码12 小时前
使用 Mock.js 模拟 API 数据,实现前后端并行开发
前端·javascript