共计 1440 个字符,预计需要花费 4 分钟才能阅读完成。
如何为 TS 类型写单测呢?
最简略的方法就是试探性拜访属性,如果该属性拜访不到天然会在异样时呈现谬误,如:
import {myLib} from "code";
myLib.update; // 正确
如上所示,如果 myLib
没有正确的凋谢 update
属性将会提醒谬误。但这种单测并不是咱们要讲的类型。想一想,如果咱们只凋谢 .update
API 给用户,但框架外部能够应用全量的 .update
、.add
、.remove
办法,如何验证框架没有把不必要的属性也凋谢给了用户呢?
一种做法是间接拜访类型提醒,此时会呈现谬误下划线:
myLib.add
~~~ // Property 'add' does not exist on type MyLib
此时阐明代码逻辑失常,但却抛出了 ts 谬误,这可能会阻塞 CI 流程,而且咱们也无从判断这个报错是否“理论山是逻辑正确的体现”,所以“不能呈现某个属性”就不能以间接拜访属性的形式实现了,咱们要做一些曲线计划。
利用非凡类型办法
咱们能够利用 extends
结构三元类型表达式,逻辑是如果 myLib
领有 .add
属性就返回 a 类型,否则返回 b 类型。因为 myLib
不该提供 .add
属性,所以下一步判断该新类型肯定合乎 b 即可:
const check: typeof myLib extends {add: any} ? number : number[] = [];
check.length; // 该行在没有 .add 属性时不会报错,反之则报错
因为咱们给的默认值是字符串,而预期正确的后果也是进入 number[]
类型分支,所以 check.length
失常,如果某次改变误将 .add
提供了进去,check.length
就会报错,因为咱们给值 []
定义了 number
类型,拜访 .length
属性必定会出错。
利用赋值语句判断
另一种简化的方法是利用 true
or false
判断变量类型是否匹配,如:
const check: typeof fn extends (a: any) => any ? true : false = true;
如果 fn
满足 (a: any) => any
类型,则 check
的类型限定为 true
,否则为 false
,所以当 fn
满足条件时该表达式正确,当 fn
不满足条件式,咱们将变量 true
赋值给类型 false
的对象,会呈现报错。
能够将 ts 转换为 js 吗?
兴许你会有疑难,能够将 ts 类型校验谬误转换为 js 对象吗?这样就能够用 expect
等断言联合到测试框架流程中了。很惋惜,至多当初是不行的,只能做到利用 js 变量推导类型,不能利用类型生成变量。
总结
总结一下,如果想判断某些类型定义未裸露给用户,而实际上在 js 变量里是领有这些属性的,就只能用类型计划判断正确性了。
比方变量 myLib
实际上领有 .update
与 .add
办法,但提供给用户的类型定义刻意将 .add
暗藏了,此时校验形式是,利用一个跳板变量 check
,应用 extends
判断其是否蕴含 add
属性,再利用非凡类型办法或者间接用赋值语句判断 extends
是否成立。
探讨地址是:精读《如何为 TS 类型写单测》· Issue #446 · dt-fe/weekly
如果你想参加探讨,请 点击这里,每周都有新的主题,周末或周一公布。前端精读 – 帮你筛选靠谱的内容。
关注 前端精读微信公众号
<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>
版权申明:自在转载 - 非商用 - 非衍生 - 放弃署名(创意共享 3.0 许可证)