TypeScript + Class + createjs.EventDispatcher

Question

I'm trying to use the createjs EventDispatcher as a way to dispatchEvents from a class. I'm extending my class using createjs.EventDispatcher and using the dispatchEvent to trigger the event.

I get the following error when this line isthis.dispatchEvent(createJSEvent); executed:

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null.

Simplified TypeScript code to demonstrate what I'd like to do:

    export class deviceOrientation extends createjs.EventDispatcher {
        constructor() {
            super();
            // wait 2 seconds and then fire testDispatch
            setTimeout(this.testDispatch(), 2000);
        }
        testDispatch():void {
            var createJSEvent:createjs.Event = new createjs.Event("change", true, true);
            this.dispatchEvent(createJSEvent);          
          }
    }

    // This is the starting function
    export function appExternalModuleTest(): void {
        let _deviceOrientation: deviceOrientation;
        _deviceOrientation = new deviceOrientation();
        _deviceOrientation.addEventListener("change", () => this.changeOrientation());
        //_deviceOrientation.on("progress", () => this.changeOrientation());
    }

    export function changeOrientationi(event: Event): void {
        console.log('orienationHasChanged ');
    }

I'm using easeljs-0.8.1.min.js

I'm not sure if this is possible with CreateJS. Is there a better approach? Any help is greatly appreciated.

Answer 1

The problem looks strange, because I do almost the same in my project and don't have any problems.

In a nutshell, I have a d.ts file for createjs classes declaration and I use these declarations in my "normal" typescript classes.

For example:

d.ts:

declare module createjs
{
    export class EventDispatcher
    {
        addEventListener(type: string, listener: any, useCapture?: boolean): void;

        removeEventListener(type: string, listener: any, useCapture?: boolean): void;
        removeAllEventListener(type?: string): void;

        dispatchEvent(event: Event): boolean;
    }

    export class Event
    {
        public type: string;

        public target: any;
        public currentTarget: any;

        constructor(type: string, bubbling?: boolean, cancelable?: boolean);

        clone(): Event;
    }
}

Normal class:

module flashist
{
    export class TestEventDispatcher extends createjs.EventDispatcher
    {
        public constructor()
        {
            super();
        }

        public testDispatch(): void
        {
            var tempEvent: createjs.Event = new createjs.Event("test");
            this.dispatchEvent(tempEvent);
        }
    }
}

And somewhere else in the code you should create an instance of the TestEventDispatcher class. Something like:

this.testDispatcher = new TestEventDispatcher();
this.testDispatcher.addEventListener("test", (event: createjs.Event) => alert("Test Event Listener"));
this.testDispatcher.testDispatch();

I've just tested the code and it works for me.

The only idea I have is to make sure that the easel.js file is loaded before your main app files.