MouseWheelEvent -> WheelEvent - Intentional Breaking Change

[kitsonk]

TypeScript Version:

nightly (v1.9.0-dev.20160610-1.0)

Code

let mouseWheelEvent: MouseWheelEvent;

Expected behavior:

Compiles without issue...

Actual behavior:

Errors with error TS2304: Cannot find name 'MouseWheelEvent'.

It appears up until about 21 days ago when the lib.dom.d.ts was updated, what was previously named MouseWheelEvent is now named WheelEvent. Looking it seems that historically IE/Edge had referred to it as MouseWheelEvent and now refers to it by the living DOM standard of WheelEvent, but I suspect this will cause a lot of breakage and downstream typings libraries (I have at least two sets of typings that are now "broken").

I suspect it is in everyone's best interest to move forward, but I suspect this will cause some carnage when TS2.0 gets released and maybe should go into whatever breaking changes pile there is.

For reference, a simple workaround is to put within a .d.ts file within the scope of the project:

declare type MouseWheelEvent = WheelEvent;

[mhegazy]

This seems like a reasonable fix.

[use-strict]

@mhegazy, seems to me having a type alias is not very useful without the constructor signature. I wonder why it was removed. AFAIK, IE still uses MouseWheelEvent. For instance, we had this code that breaks now:

let delta: number;
if (typeof MouseWheelEvent !== 'undefined' && ev instanceof MouseWheelEvent) {
    delta = -ev.wheelDelta;
} else if (ev instanceof WheelEvent) {
    delta = ev.deltaY;
}

Is the intention to only have standard APIs in the lib, without ms* specific things? Since we still target IE11, how should we handle such cases? e.g. msRequestAnimationFrame, which was also removed.

[use-strict]

Also, the type alias makes it impossible to augment the interface with extra properties, in the project scope.

This snippet is the old definition. I tried adding this manually in the project but it conflicts with the standard definitions:

interface MouseWheelEvent extends MouseEvent {
    wheelDelta: number;
    wheelDeltaX: number;
    wheelDeltaY: number;
    initMouseWheelEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, buttonArg: number, relatedTargetArg: EventTarget, modifiersListArg: string, wheelDeltaArg: number): void;
}

declare var MouseWheelEvent: {
    prototype: MouseWheelEvent;
    new(): MouseWheelEvent;
}