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

7y4bm7vi 于 2022-11-10 发布在 TypeScript

关注(0)|答案(3)|浏览(153)

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

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

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

...我得到这些编译时错误：

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

我不太熟悉TypeScript如何处理这个问题，但看起来它可以处理。
注意：寻找一个容易应用于多个类的解决方案，这些类也需要Backbone.Events功能（也就是说，我不想复制/粘贴所有的on,off,listenTo...方法，或者一些时髦的代理方法，到每个需要它们的类）。
由于Backbone.Events只是一个对象，所以我无法使用普通的ES6语法扩展它。例如）

class Foo extends Backbone.Events {}

想法？

backbone.js

来源：https://stackoverflow.com/questions/37333323/how-can-i-extend-backbone-events-in-a-typescript-es6-class

3条答案

按热度按时间

fnx2tebb1#

如果您使用_.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，这些函数将覆盖为intellisense和类型检查定义的所有方法。
已更新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(); 
    }
  }

赞(0）回复(0）举报 2022-11-10

zfycwa2u2#

在Backbone.Events上，事件处理附加在对象本身上，而不是附加在其.prototype上，以下是您可以更正此问题的方法：

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;

现在用它作为被继承：

class Dog extends EventEmitter {

}

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

赞(0）回复(0）举报 2022-11-10

5jdjgkvh3#

1.使用此处的键入-https://www.npmjs.com/package/@types/backbone
1.编写Backbone.EventsMixin的实现，就在Backbone脚本后面的某个地方包括：

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

1.那么它可以这样使用：

class SomeClass extends Backbone.EventsMixin

赞(0）回复(0）举报 2022-11-10

我来回答

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

3条答案

相关问题

热门标签

最新问答