打字稿 + Class + createjs.EventDispatcher

Question

我正在尝试使用 createjs EventDispatcher 作为从 class 调度事件的方式。我正在使用 createjs.EventDispatcher 扩展我的 class 并使用 dispatchEvent 来触发事件。

执行此行this.dispatchEvent(createJSEvent);时出现以下错误：

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

简化的 TypeScript 代码来演示我想做什么：

    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 ');
    }

我正在使用 easeljs-0.8.1.min.js

我不确定 CreateJS 是否可行。有更好的方法吗？非常感谢任何帮助。

Answer 1

这个问题看起来很奇怪，因为我在我的项目中做的几乎一样，没有任何问题。

简而言之，我有一个用于 createjs classes 声明的 d.ts 文件，我在我的 "normal" 打字稿 classes 中使用这些声明。

例如：

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;
    }
}

正常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);
        }
    }
}

在代码的其他地方，您应该创建一个 TestEventDispatcher 的实例 class。类似于：

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

我刚刚测试了代码，它对我有用。

我唯一的想法是确保 easel.js 文件在主应用程序文件之前加载。

打字稿 + Class + createjs.EventDispatcher

TypeScript + Class + createjs.EventDispatcher

createjs