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

Question

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

最天真的解决方案是

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

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

修复它的一种方法是显式指定类型参数 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);

这是最安全但也是最丑陋的。

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

Answer 1

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

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