TypeScript – 冷知识

当 generic return 遇上 parameter

 报错了。原因是 querySelector 默认返回类型是抽象的 Element。

而 method 参数要求的是具体的 InputElement

解决方法是传入具体的 InputElement 类型

const input = document.querySelector<HTMLInputElement>('.input')!;

但这不是重点。看看下面这个

我直接把 querySelector 的返回放进了 method 参数。结果就不报错了。

观察 querySelector 类型,TypeScript 自动把 generic 换成了 InputElement。

虽然我没有找到相关文档说明这一点,但感觉是 Contextual Typing(上下文推导)搞的鬼,估计 TypeScript 认为写代码的人不会在这里犯错。

还有一个类似的情况

getInput 没有放 generic,它应该用 default 的 generic 也就是 HTMLInputElement,然后 method 参数要求的正是 HTMLInputElement,所以不应该报错丫。但是还是报错了。

如果我们改成这样写就不会报错。

所以当各种情况叠加到一起是,TypeScript 有时候会变得不那么直观。当然其原理我也没有深入去研究,懒。

 

posted @ 2023-08-27 20:11  兴杰  阅读(31)  评论(0)    收藏  举报