javascript - 如何在 Typescript ES6 类中扩展 Backbone.Events？

Question

我正在尝试将 Backbone 的事件属性附加到 TypeScript 类上，但是当我这样做时...

class Foo {
    constructor () {
        _.assign(this, Backbone.Events); // or _.extend()
        this.stopListening(this.otherInstance);
    }
}

let bar = new Foo();
bar.on("myevent", handler);

...我遇到了这些编译时错误:

• 错误 TS2339:属性“stopListening”在类型“Foo”上不存在。
• 错误 TS2339:属性“on”在类型“Foo”上不存在。

我不太熟悉 TypeScript 如何处理这个问题，但它似乎可以处理。

注意:正在寻找一种易于应用于还需要 Backbone.Events 功能的多个类的解决方案(即，我不想复制/粘贴所有 on,off ,listenTo... 方法，或一些时髦的代理方法，给每个需要它们的类)。

由于 Backbone.Events 只是一个对象，我无法使用普通的 ES6 语法扩展它。例如)

class Foo extends Backbone.Events {}

想法？

Answer 1

如果您使用 _.extend 而不是 _.assign 它将起作用，

这是一个Plunker

    class Foo {
      constructor () {
         _.extend(this, Backbone.Events);
      }
    }

    let bar : any = new Foo();

    bar.on("alert", function(msg) {
      alert("Triggered " + msg);
    });

    bar.trigger("alert", "an event");

更新代码，使其不会出现编译时错误。

更新

您可以创建一个类，其中包含为 Backbone.Events 定义的所有函数，并且它的构造函数可以扩展 Backbone.Events，这将覆盖刚刚为智能感知和类型检查定义的所有方法.

更新了 plunker

 class CustomEvents {
    constructor() {
      _.extend(this, Backbone.Events);
    }

    on(eventName: string, callback?: Function, context?: any): any { return; };
    off(eventName?: string, callback?: Function, context?: any): any { return; };
    trigger(eventName: string, ...args: any[]): any { return; };
    bind(eventName: string, callback: Function, context?: any): any { return; };
    unbind(eventName?: string, callback?: Function, context?: any): any { return; };

    once(events: string, callback: Function, context?: any): any { return; };
    listenTo(object: any, events: string, callback: Function): any { return; };
    listenToOnce(object: any, events: string, callback: Function): any { return; };
    stopListening(object?: any, events?: string, callback?: Function): any { return; };
  }

您可以像下面这样使用 CustomEvents 类扩展任何类，

  class Foo extends CustomEvents {
    constructor(){
      super(); 
    }
  }