react-testing-library之Jest单测坑—TS的类型隐式推导

TS的类型推导问题

一. 问题背景

在写单测时偶然发现某个TS类型推导问题，此问题在以前也被不同的同事所遇到过，文末会给出4种处理方案

二. 场景如下

（注：左为组件Props定义，右为testProps定义）

---

这是一个简单的jest单测，通过预定的Props传入相关的testProps，看起来似乎没什么问题，但是在执行reder( )时会报错，具体如下：

---

但是如果将参数变为通过行内解构传入的方式则不会报错，如下图：

---

三. 问题分析——TS的 ‘隐式推导’

TS只能在编译时进行类型检查，所以————
在定义时：如果没有明确的指定类型，那么TypeScript会依照类型推论（TypeInference）的规则推断出一个类型。
在传入时：会查看传入对象和预定Props是否一致，此时只有检查，没有推导。但如果传入的对象是已手动声明过类型，TS就会知道传入的值是有类型的，此时将会进行隐式推导。

由此可以大胆猜测：若将status写入上文的testProps里，这个status类型就是看testProps是如何定义的，然后再和Result组件中已定义的Props进行比较，此时并无推导，而testProps并未手动指定类型，故会导致 ‘String’ 类型 和 'success | error | warning ’ 类型不兼容。如若将status通过行内解构的方式传入，此时的status已经在Props里有指定的类型，故会进行隐式推导，验证如下图：