Skip to content

Add CustomEvent to EventListener - #1535

Closed
Chris Ewald (mkcode) wants to merge 2 commits into
microsoft:mainfrom
mkcode:add-custom-event-to-event-listener
Closed

Chris Ewald (mkcode) wants to merge 2 commits into
microsoft:mainfrom
mkcode:add-custom-event-to-event-listener

Conversation

@mkcode

Copy link
Copy Markdown

Type definition for EventListener and EventListenerObject is overly narrow and does not allow for CustomEvent.

Submitting this PR on behalf of issue: microsoft/TypeScript#28357

MDN and WhatWG seem to specify that this is allowed:

@github-actions

github-actions Bot commented Apr 1, 2023

Copy link
Copy Markdown
Contributor

Thanks for the PR!

This section of the codebase is owned by Kagami Sascha Rosylight (@saschanaz) - if they write a comment saying "LGTM" then it will be merged.

@mkcode

Copy link
Copy Markdown
Author

Kagami Sascha Rosylight (@saschanaz) - Following up on your comment: microsoft/TypeScript#28357 (comment)

I believe that extending the EventMap interfaces would not solve the issue for generic EventTargets.

This way does, but may break other things.

@saschanaz

Copy link
Copy Markdown
Contributor

Event | CustomEvent is equivalent to CustomEvent, and thus this makes every unknown event interfaces as CustomEvents. IMO that's too aggressive, as:

  1. Any "custom events" also can use the base Event instead of CustomEvent or any custom subclasses of Event
  2. Any new event added in new versions of browsers will collide with the CustomEvent definition (Event as AnySubclassedEvent works but CustomEvent as AnySubclassedEvent does not)

I believe that extending the EventMap interfaces would not solve the issue for generic EventTargets.

You should still be able to add your own addEventListener signature in that case and follow the pattern of the existing types.

@mkcode

Chris Ewald (mkcode) commented Apr 1, 2023 •

Copy link
Copy Markdown
Author

Yep. This is much more complicated than the DX that I want of just specifying the parameter type of the callback function:

object.addEventListener('my-event', (event: CustomEvent<CustomType>) => { event.detail }))

But, I think you are right that what I wrote is actually just a bad TypeScript pattern. The type definition belongs in the object definition using the methods you described, not in callback handlers.

Thank you. I appreciate your time and detailed response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants