Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EventListener interface does not accept objects with a handleEvent method #1224

Closed
sccolbert opened this issue Nov 20, 2014 · 4 comments
Closed
Labels
Bug A bug in TypeScript Domain: lib.d.ts The issue relates to the different libraries shipped with TypeScript Revisit An issue worth coming back to

Comments

@sccolbert
Copy link

Issue from the old tracker:
https://typescript.codeplex.com/workitem/45

EventTarget.addEventListener accepts a function or an object implementing EventListener:
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

@saschanaz
Copy link
Contributor

http://www.w3.org/TR/DOM-Level-3-Events/#widl-EventListener-handleEvent

In JavaScript, user-defined functions are considered to implement the EventListener interface. Thus the event object will be provided as the first parameter to the user-defined function when it is invoked. Additionally, JavaScript objects can also implement the EventListener interface when they define a handleEvent method.

I think EventListener interface should be changed to:

interface EventListener {
  handleEvent(evt: Event): void;
}

// OR

type EventListener = { handleEvent(evt: Event): void } | Function;

and EventTarget interface should be changed to:

interface EventTarget {
    removeEventListener(type: string, listener: Function|EventListener, useCapture?: boolean): void;
    addEventListener(type: string, listener: Function|EventListener, useCapture?: boolean): void;
    dispatchEvent(evt: Event): boolean;
}

I also think #299 is somewhat related.

@danquirk danquirk added Bug A bug in TypeScript Revisit An issue worth coming back to labels Nov 24, 2014
@RyanCavanaugh RyanCavanaugh added the Domain: lib.d.ts The issue relates to the different libraries shipped with TypeScript label Nov 26, 2014
@mhegazy mhegazy self-assigned this Dec 3, 2014
@mhegazy mhegazy added this to the TypeScript 2.0 milestone Dec 3, 2014
@mhegazy mhegazy modified the milestones: TypeScript 2.0, TypeScript 1.6 Apr 2, 2015
@mhegazy mhegazy assigned zhengbli and unassigned mhegazy Apr 7, 2015
@mhegazy mhegazy added Bug A bug in TypeScript and removed Bug A bug in TypeScript labels Apr 17, 2015
@mhegazy mhegazy closed this as completed Apr 17, 2015
@LPGhatguy
Copy link
Contributor

@mhegazy how was this ticket resolved? I hit this issue today when removeElementListener wasn't accepting a Function argument in TypeScript 1.6.

@mhegazy
Copy link
Contributor

mhegazy commented Oct 14, 2015

here is what we have in lib.d.ts today:

interface EventListener {
    (evt: Event): void;
}

interface EventListenerObject {
    handleEvent(evt: Event): void;
}

declare type EventListenerOrEventListenerObject = EventListener | EventListenerObject;

interface EventTarget {
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
    dispatchEvent(evt: Event): boolean;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

this means that the assigning anything with a call signature works:

var e: EventTarget;
var f: () => void;
e.addEventListener("e", f);
e.removeEventListener("e", f);

the issue is that Function is not assignable to an object with call signature, as we do not know its parameter nor return types. so this does not work:

var e: EventTarget;
var f: Function;
e.addEventListener("e", f); // error
e.removeEventListener("e", f); // error

which is similar to:

var f1: () => void;
var f2: Function;

f1 = f2; // Error
f2 = f1; // OK

Now the question is do we need the Function type to be supported? i think what we have now provides for greater type safety.

@birtles
Copy link

birtles commented Nov 1, 2017

It would be neat if the following worked:

const styleSheetLoad = (link: HTMLLinkElement): Promise<void> =>
  new Promise(resolve => {
    link.addEventListener('load', resolve);
  });

Instead I get:

error TS2345: Argument of type '(value?: void | PromiseLike<void>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
  Type '(value?: void | PromiseLike<void>) => void' is not assignable to type 'EventListenerObject'.
    Property 'handleEvent' is missing in type '(value?: void | PromiseLike<void>) => void'.

But perhaps I'm just doing it wrong.

@microsoft microsoft locked and limited conversation to collaborators Jun 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug A bug in TypeScript Domain: lib.d.ts The issue relates to the different libraries shipped with TypeScript Revisit An issue worth coming back to
Projects
None yet
Development

No branches or pull requests

8 participants