如何定义该TS函数的返回类型以消除boolean不匹配HTMLElement的告警

错误原因 #

你当前的函数是用于判断入参是否为HTMLElement实例的工具函数，实际返回值为布尔值，但你给函数标注的返回值类型是HTMLElement，二者类型不匹配，因此触发类型报错。

修复方案 #

将返回值类型修改为TS类型谓词o is HTMLElement即可，修改后的代码如下：

export function isElement(o: any): o is HTMLElement {
  return typeof HTMLElement === 'object'
    ? o instanceof HTMLElement //DOM2
    : o &&
        typeof o === 'object' &&
        o !== null &&
        o.nodeType === 1 &&
        typeof o.nodeName === 'string'
}

该改动有两个作用：

• 首先o is HTMLElement本身的基础类型是boolean，和函数实际返回值类型匹配，可直接消除告警
• 其次类型谓词可以支持TS类型收窄，当你在代码中通过if(isElement(变量))判断后，TS会自动将该变量识别为HTMLElement类型，不需要额外做类型断言，更符合TS的类型使用规范。

内容的提问来源于stack exchange，提问作者Rick