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

🔎 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

for the record: this is not a crash

Bruce Pascoe (@fatcerberus)

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

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

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)

Joe Calzaretta (@jcalz)

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.

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

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

Navigation Menu

Repository navigation

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

🔎 Search Terms

🕗 Version & Regression Information

⏯ Playground Link

💻 Code

🙁 Actual behavior

🙂 Expected behavior

Additional information about the issue

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

🔎 Search Terms

🕗 Version & Regression Information

⏯ Playground Link

💻 Code

🙁 Actual behavior

🙂 Expected behavior

Additional information about the issue

Activity

fatcerberus commented on May 10, 2024

LifeJustDLC commented on May 11, 2024

fatcerberus commented on May 11, 2024

jcalz commented on May 11, 2024

LifeJustDLC commented on May 12, 2024

RyanCavanaugh commented on Jun 17, 2024

typescript-bot commented on Jun 20, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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