Event `type` (name string) doesn't get properly checked or suggestions when using addEventListener() on an Union of multiple HTMLElement types

[LifeJustDLC]

🔎 Search Terms

"event type", "addEventListener", "suggestion"

🕗 Version & Regression Information

• This is a crash

⏯ Playground Link

No response

💻 Code

type DivOrSpan = HTMLDivElement | HTMLSpanElement
const divOrSpan = document.querySelector<DivOrSpan>(".could-be-div-or-span")!
divOrSpan.addEventListener("typo", () => {}) // neither complain or suggest when first typing

const div = document.querySelector<HTMLDivElement>(".div")!
div.addEventListener("click", () => {}) // doesn't complain either but get suggestions automatically as well as pressing ctrl+i

🙁 Actual behavior

first one neither complain or suggest when first typing.

🙂 Expected behavior

get suggestions automatically as well as pressing ctrl+i like the second one.

Additional information about the issue

No response

[fatcerberus]

for the record: this is not a crash

[LifeJustDLC]

Bruce Pascoe (@fatcerberus) sorry, I didn't have the time to bisect the versions.

[fatcerberus]

No, I just meant that you put

This is a crash

but it’s not - the compiler didn’t crash. It’s just not doing what you expect

[jcalz]

I suspect this is just a caveat of #29011, you're calling a union of overloaded and generic methods. Feels like a design limitation to me (just a nosy bystander and not a TS team member)

[LifeJustDLC]

Joe Calzaretta (@jcalz) Thanks for your insights.

The caveats are that only one type in the list of union members is allowed to have overloads, and only one type within the list of union members is allowed to have type parameters.

I didn't fully understand that post, but I think it's a little different:

As Wesley Wigham (@weswigham) described, and as I understand, it will at least get an intersected signature (suggestion) between A and B? which is "2" in the above case. but in the similar case of HTMLDivElement and HTMLSpanElement, this seems doesn't work.

[RyanCavanaugh]

These signatures don't merge because the this value is different in the callbacks

[typescript-bot]

This issue has been marked as "Design Limitation" and has seen no recent activity. It has been automatically closed for house-keeping purposes.