Deno: addEventListener with CustomEvent

[chrisands]

Hi,

I tried to write an app with Deno and noticed that addEventListener doesn't return detail property on a CustomEvent.
It should return detail property.

UPD: my bad, it actually returns detail property, but it doesn't exist on type EventListener.

[chrisands]

Also, there probably should be generic CustomEventListener or type EventListener should be generic with detail property.

[crowlKats]

this might be related to microsoft/TypeScript#28357

[deebloo]

@chrisands if you manually add the "DOM" lib to a custom tsconfig does that cause the issue to go away?

[chrisands]

@deebloo it throws error that I should also add es* lib

TS2583 [ERROR]: Cannot find name 'Promise'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
    readonly trailer: Promise<Headers>;
                      ~~~~~~~
    at $asset$/lib.dom.d.ts:12616:23

When I add esnext to tsconfig I get Deno errors

TS2304 [ERROR]: Cannot find name 'Deno'.
  private debug?: string = Deno.env.get("DEBUG_BOT")
                           ~~~~
    at file:///Users/osiyuk/Projects/telegram-netlify-bot/src/utils/logger.ts:3:28

[deebloo]

@chrisands Ah that makes sense. If you do it this way you need to run deno types and generate the type definitions manually. For sure still a bug but it is a functioning workaround

[chrisands]

@deebloo thank you for explaining. Well, adding "dom" lib doesn't help the issue go away.

error: TS2339 [ERROR]: Property 'detail' does not exist on type 'Event'.
    console.log("message event", e.detail)

[deebloo]

@chrisands you will need to manually specify that your event is a "CustomEvent"

[chrisands]

I did this to make it work:

// it's class method
  on = <T extends keyof Events>(
    type: T,
    callback: CustomEventListener<Events[T]>
  ) => {
    addEventListener(type, callback as EventListener)
  }

export interface CustomEventListener<T = any> {
  (evt: CustomEvent<T>): void | Promise<void>
}

[deebloo]

for simple examples this also works

addEventListener("something", (evt) => {
  const e = evt as CustomEvent<any>;

  console.log(e.detail);
});