在事件处理程序中使用另一个类中的方法并绑定当前类上下文时，打字稿错误TS2339

Question

I have a service which handles all of my dom manipulation called DomService

I have another service handling modal functionality called ModalService

In ModalService I'm binding a few events and giving it a method from DomService as the listener which looks like:

document.body.addEventListener('focus', this.domService.keyPress.bind(this), true);

and then keyPress looks something like:

keyPress(event){
    if (event.which === key.escape) {
        event.preventDefault();
        this.hide();
    }
}

It works fine, the problem is typescript stills sees this as a reference to the DomService class when it's actually bound to the ModalService class, so it's telling me the hide property doesn't exist on type DomService

Is there anything I can do to get typescript to chill?

Answer 1

You can change the context of this in any function by adding it (and its type) as the first argument to the function. So to change the context of this inside keyPress to be a ModalService , you would do:

keyPress(this: ModalService, event) {
    if (event.which === key.escape) {
        event.preventDefault();
        this.hide(); // Now is OK.
    }
}

You can read more about that feature here .

In addition to that, you can always add a line // @ts-ignore above any line creating an error to silence it, if the above solution isn't sufficient.

Answer 2

You can use EventEmitter and handle (subscribe) "emit" event.

ModalService

this.subscriptionHide = this.domService.getHideEmitter()
  .subscribe(() => this.hide());

DomService

hideEmitter: EventEmitter<any> = new EventEmitter();

keyPress(event){
    if (event.which === key.escape) {
        event.preventDefault();
        this.hideEmitter.emit(null);
    }
}

getHideEmitter() {
    return this.hideEmitter;
}

Answer 3

Try change your functions to arrow functions.

Change

keyPress(event) {

To

keyPress = (event) => {

You can read about arrow functions in typescript here