是否有一种简洁的功能方式来断言集合中的元素类型？

Posted 2021-05-03

假设我们想要收集页面上所有复选框的名称。

最天真的解决方案是

const names = [...document.querySelectorAll('input[type=checkbox]')]
    .map(el => el.name);

它没有通过类型检查，因为document.querySelectorAll返回Element的集合，它没有name属性。

解决它的一种方法是明确指定类型参数document.querySelectorAll<htmlInputElement>。

它会使编译器感到高兴，而不是我：现在这段代码不是类型安全的，可能在运行时失败。

类型安全的解决方案可能看起来

const names = [...document.querySelectorAll('input')]
    .filter(el => el.matches('[type=checkbox]'))
    .map(el => el.name);

但它会使代码更冗长，更不清晰，一般来说这个解决方案不会扩展（这里我的意思是你不能一般地应用它，因为不是每个选择器都可以轻松拆分）。

最后，同时进行静态和运行时检查

const names = [...document.querySelectorAll('input[type=checkbox]')]
    .reduce((acc, el) => el instanceof HTMLInputElement ? [...acc, el] : acc, [] as HTMLInputElement[])
    .map(el => el.name);

这是最安全但最丑陋的。

最后，我的问题是：有没有办法让它像最新的选项一样安全，但更具可读性？

答案

您可以使用带有filter的类型保护来过滤掉不需要的节点并更改数组的类型：

const names = [...document.querySelectorAll('input[type=checkbox]')]
    .filter((el): el is HTMLInputElement => el instanceof HTMLInputElement)
    .map(el => el.name);