用强数据类型保护你的表单数据 - 基于 antd 表单的类型约束 | 京东云技术团队
概述
接口数据类型与表单提交数据类型,在大多数情况下,大部分属性的类型是相同的,但很少能做到完全统一。
我在之前的工作中经常为了方便,直接将接口数据类型复用为表单内数据类型,在遇到属性类型不一致的情况时会使用any
强制忽略类型错误。
后来经过自省与思考,这种工作模式会引起各种隐藏 bug,一定有更好的工程解决方案。
我的答案就是:为表单提交数据单独定义类型!
类型解说
接口定义的请求体类型
请求数据类型
表单提交数据类型定义
有了该类型,我们可以方便的将该类型使用在表单实例上
类型复用优化
如果表单的数据类型和接口提交的数据类型完全一致,当然可以共用一个,但现实世界这种情况几乎没有。
大多数情况是可以复用一些接口的属性到表单的数据类型中,例如上面的两个数据结构,其中 name、id 属性是相同的,则 FormValue 可以优化为
Form.Item 限定 name 优化
应用此时表单组件的name
约束就应为我们自定义的表单数据类型FormValue
,定义约束组件
应用该约束组件
数据转换
在表单的onFinish
提交过程中,需要一个将**FormValue(表单数据)转换为 RequestBody(提交数据)**的函数,类型定义如下:
复杂表单类型
复杂表单有些表单数据并非一层的key => value
,而是多层树状或数组结构。
例如:提交数据结构
表单中关于 rule 的写法为:
这种情况下,name
不再是简单的字符串,应该如何用类型约束?
如果可以我希望使用类型工具,兼容多层表单数据结构,但一直没成功。
我目前的方法是,为该表单层级安排一个专用类型,该方法会有些写的麻烦,但胜在能准确的定义好类型。
我在采用该方法校验表单 name 数据时发现了几个很难发现的拼写错误,提前制止了测试同学提 bug 过来。
例如为rule
属性定义单独的RuleFormItem
:
调用时
此时数组中的 rule 与 min 都能收到类型的保护。
泛型抽象
应用泛型
🎉🎊 恭喜,现在你的表单已经被类型完整的保护了。
作者:京东零售 王凡
来源:京东有开发者社区 转载请注明来源
版权声明: 本文为 InfoQ 作者【京东科技开发者】的原创文章。
原文链接:【http://xie.infoq.cn/article/6e5c40762eca609c3892164ad】。文章转载请联系作者。
评论