How can I extend Backbone.Events in a Typescript ES6 Class?

Question

I'm trying to attach Backbone's Events properties onto a TypeScript class, however when I do this...

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

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

...I get these compile time errors:

• Error TS2339: Property 'stopListening' does not exist on type 'Foo'.
• Error TS2339: Property 'on' does not exist on type 'Foo'.

I'm not very familiar with how TypeScript would approach this, but seems like something it could handle.

Note: looking for a solution that's easy to apply to multiple classes that also need Backbone.Events functionality (ie. I don't want to copy/paste all the on,off,listenTo... methods, or some funky proxy approach, to every class that needs them).

Since Backbone.Events is just an object, I can't extend it using normal ES6 syntax. Ex)

class Foo extends Backbone.Events {}

Ideas?

Answer 1

instead of _.assign if you use _.extend it will work,

Here is a 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");

updated code so that it does not gives compile time error.

UPDATE

you may create a class which has all the functions defined for Backbone.Events and constructor of it can extend Backbone.Events, which will override all the methods which is just defined for intellisense and type check.

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

and you can extend any class with CustomEvents class like below,

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

Answer 2

On Backbone.Events the event handling are attached on the object itself rather than on its .prototype, here is how you can correct that:

import {Events} from 'backbone';

interface IEventEmitter extends Events {
    emit(event: string, ...args: any[]);
}

function _EventEmitter() {}
_EventEmitter.prototype = Events;
_EventEmitter.prototype.emit = (Events as any).trigger;
export const EventEmitter: new() => IEventEmitter
    = _EventEmitter as any as new() => IEventEmitter;

Now use it as by inheritance:

class Dog extends EventEmitter {

}

var dog = new Dog;
dog.on('bark', () => console.log('Dog just barked'));
dog.emit('bark');