typescript中"联合类型"的addEventListener回调函数类型范围缩小了?

Question

环境ts4.6

下面的el单独标注SVGElement或者HTMLElement代码都是没问题的? 为什么用"|"放到一起后addEventListener的回调函数的参数范围缩小了?

请问应该如何优雅的实现下面的逻辑?

let el!:SVGElement|HTMLElement;
let catchEvent =(e: TouchEvent) => {}
el.addEventListener('touchstart', catchEvent);

报错信息:

类型“(e: TouchEvent) => void”的参数不能赋给类型“EventListenerOrEventListenerObject”的参数。
不能将类型“(e: TouchEvent) => void”分配给类型“EventListener”。

参数“e”和“evt” 的类型不兼容。
  类型“Event”缺少类型“TouchEvent”的以下属性: altKey, changedTouches, ctrlKey, metaKey 及其他 6 项。ts(2345)

补充:
加个判断可以不报错, 但是肯定不能这么写...

        if (el instanceof HTMLElement) {
            el.addEventListener('touchstart', catchEvent);
        } else {
            el.addEventListener('touchstart', catchEvent);
        }

Answer 1

你好，在 TypeScript 中 SVGElement|HTMLElement 出于类型安全的考虑，会取其共同父类 Element 类型，而 Element 类型的 addEventListener 方法不支持 catchEvent 事件。