I was under the impression that "all valid JavaScript is valid TypeScript"; but every time I try to use it, I get stuck trying to do something simple :(

In this case, I'm trying to rename some .js files to .ts and get things piling with as little work as possible. I want to convert to TypeScript progressively; so the focus is on just getting it piling rather than translating all of the code.

I'm starting with some code that include the CustomEvent polyfill from here:

The code is this:

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

Then there is some code that calls it:

window.dispatchEvent(new CustomEvent('typeScriptIsTehCool', { detail: 1 }));

However, if you paste all of this into you'll find a few issues:

• window.Event is not defined in the base lib
• document.createEvent does not return something with an initCustomEvent function
• window.CustomEvent cannot be set (because window is known, and you can't just make up a property on a known type without defining it)
• the call to new CustomEvent(x, y) fails because TypeScript uses the lib defintion of CustomEvent that does not have this constructor

I've tried various things to get this working; including adding Event and CustomEvent to window in a .d.ts, making CustomEvent a standard function; and other things, but I just can't eliminate all of the errors.

Am I missing something obvious?

I was under the impression that "all valid JavaScript is valid TypeScript"; but every time I try to use it, I get stuck trying to do something simple :(

In this case, I'm trying to rename some .js files to .ts and get things piling with as little work as possible. I want to convert to TypeScript progressively; so the focus is on just getting it piling rather than translating all of the code.

I'm starting with some code that include the CustomEvent polyfill from here: https://developer.mozilla/en/docs/Web/API/CustomEvent

The code is this:

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

Then there is some code that calls it:

window.dispatchEvent(new CustomEvent('typeScriptIsTehCool', { detail: 1 }));

However, if you paste all of this into http://www.typescriptlang/Playground you'll find a few issues:

• window.Event is not defined in the base lib
• document.createEvent does not return something with an initCustomEvent function
• window.CustomEvent cannot be set (because window is known, and you can't just make up a property on a known type without defining it)
• the call to new CustomEvent(x, y) fails because TypeScript uses the lib defintion of CustomEvent that does not have this constructor

I've tried various things to get this working; including adding Event and CustomEvent to window in a .d.ts, making CustomEvent a standard function; and other things, but I just can't eliminate all of the errors.

Am I missing something obvious?

• javascript
• typescript

Share Improve this question Follow edited May 28, 2014 at 19:57 Andy G 19.4k55 gold badges4949 silver badges7070 bronze badges asked May 28, 2014 at 19:55 Danny TuppenyDanny Tuppeny 42.6k2525 gold badges161161 silver badges290290 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Some use of any will get you there :

interface Window {
    CustomEvent: CustomEvent;
}

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt:CustomEvent = <any>document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = Event.prototype;

  window.CustomEvent = <any>CustomEvent;
})();

You can extend objects by adding new properties/functions on them via the following pattern.

interface Window {
    Event : Event;
    CustomEvent(event : any, params : any) : Event;
}
interface Event {
    prototype : Event;
}
declare var CustomEvent: {
    new (event : string, detail : any) : CustomEvent;
}

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = <CustomEvent>document.createEvent('CustomEvent');
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

window.dispatchEvent(new CustomEvent('typeScriptIsTehCool', { detail: 1 }));

I'm not sure what the param types are so you'll have to add those yourself but this should get you in the right direction.

interface IWindow extends Window {
    CustomEvent: CustomEvent;
}

interface IParams {
    bubbles: boolean;
    cancelable: boolean;
    detail: any;
}

(() => {
    function CustomEvent(
        event: string,
        params: IParams = {
            bubbles: false,
            cancelable: false,
            detail: undefined
        }
    ) {
        const evt: CustomEvent = document.createEvent('CustomEvent') as any;
        evt.initCustomEvent(
            event,
            params.bubbles,
            params.cancelable,
            params.detail
        );
        return evt;
    }

    CustomEvent.prototype = Event.prototype;
    const win = window as IWindow;
    win.CustomEvent = CustomEvent as any;
})();

IE11 and Typescript yeah its possible to need that bination.