Is there a way to enhance Backbone.Events within a Typescript ES6 Class?

Question

Is there a way to enhance Backbone.Events within a Typescript ES6 Class?

Trying to incorporate Backbone's Events properties into a TypeScript class has hit a roadblock. Here's what I'm encountering...

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

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

The problem arises when these compile time errors show up:

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

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

I'm not well-versed in how TypeScript deals with this issue, but it seems like something that should be manageable.

Note: searching for a solution that can easily be implemented across multiple classes requiring Backbone.Events functionality (i.e. avoiding the repetition of copying/pasting all the on, off, listenTo... methods, or using some complex proxy approach).

Given that Backbone.Events is simply an object, traditional ES6 syntax won't allow me to extend it. For example:

class Foo extends Backbone.Events {}

Any suggestions?

javascript inheritance backbone.js typescript

Answer 1

Answer №1

if you switch from using _.assign to _.extend, the code will function properly,

Check out this 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");

revised the code to avoid compile time errors.

UPDATE

you can create a class that includes all functions defined for Backbone.Events, and its constructor can extend Backbone.Events, overriding all the methods for intellisense and type checking purposes.

updated version on 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; };
  }

you can extend any class with the CustomEvents class as shown below,

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

https://i.sstatic.net/a9WSt.png

Answer 2

if you switch from using _.assign to _.extend, the code will function properly,

Check out this 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");

revised the code to avoid compile time errors.

UPDATE

you can create a class that includes all functions defined for Backbone.Events, and its constructor can extend Backbone.Events, overriding all the methods for intellisense and type checking purposes.

updated version on 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; };
  }

you can extend any class with the CustomEvents class as shown below,

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

https://i.sstatic.net/a9WSt.png

Answer 3

Answer №2

When working with Backbone.Events, it's important to note that event handling is attached directly to the object itself rather than its .prototype. Here is a solution for proper implementation:

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;

You can now use inheritance like this:

class Cat extends EventEmitter {

}

var cat = new Cat;
cat.on('meow', () => console.log('Cat just meowed'));
cat.emit('meow');

Answer 4

When working with Backbone.Events, it's important to note that event handling is attached directly to the object itself rather than its .prototype. Here is a solution for proper implementation:

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;

You can now use inheritance like this:

class Cat extends EventEmitter {

}

var cat = new Cat;
cat.on('meow', () => console.log('Cat just meowed'));
cat.emit('meow');

Answer 5

Answer №3

Download typings from this source - https://www.npmjs.com/package/@types/backbone
Add the Backbone.EventsMixin implementation right after including the Backbone script:

Backbone.EventsMixin = function () {
    _.assign(this, Backbone.Events);
}

You can now utilize it as follows:

class SomeClass extends Backbone.EventsMixin

Answer 6

Download typings from this source - https://www.npmjs.com/package/@types/backbone
Add the Backbone.EventsMixin implementation right after including the Backbone script:

Backbone.EventsMixin = function () {
    _.assign(this, Backbone.Events);
}

You can now utilize it as follows:

class SomeClass extends Backbone.EventsMixin

Is there a way to enhance Backbone.Events within a Typescript ES6 Class?

Answer №1

Answer №2

Answer №3

Similar questions

Modifying various states within React using the useState() hook

Retrieve data from a ng-repeat variable within a controller

How to use jQuery to hide list items after a certain threshold

Is the variable not being initialized outside of the function?

Check the type of the indexed value

Incorporate ajax into the JavaScript geocoder functionality

Struggling to convert my VueJS component from JavaScript to TypeScript, feeling a bit lost

Creating a layout of <video> components in vue.js, complete with the ability to rearrange and resize them through drag and drop functionality

Is it feasible to add on to an existing object in the database? (Using Node.js and Mongoose

Reorganizing an array while initializing it in Javascript

Combine an array of objects into a regular object

Element search feature added to dropdown menu

What is the best way to update information in the `App` component using Vue?

What is the method for executing a function enclosed within a variable?

Remove the default shake effect in react-native (expo)

Modifying the Redux state using an array with prototypes

Connecting nodes to edges based on their unique ids in the d3.js graph library

Activate function on Selected DIV

Is the ternary operator in JavaScript similar to the one in C?

Generate random div elements and insert them dynamically into a fixed-sized container using AngularJS. The number of div elements created can range anywhere from 0 to