TypeScript, comment conserver les méthodes de classe contexte des gestionnaires d'événements à "cette" instance

Question

J'ai un problème avec les classes en TypeScript. Chaque fois que je dois écouter un événement HTML Element, j'ai besoin d'utiliser Function.bind() pour le connecter à l'instance en cours. Je n'ai pas besoin d'enregistrer la fonction anonyme liée chaque fois que vous avez 5-10 événements, cela va devenir un gâchis. Je veux juste l'avoir lié.

des suggestions?

Answer 1

Vous pouvez utiliser les fonctions de direction pour les méthodes d'écoute:

class VideoAdProgressTracker extends EventDispatcher { 
    private _video:HTMLVideoElement; 

    constructor(video:HTMLVideoElement) { 
     super(); 
     this._video = video; 
     this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent); 
    } 

    private handleTimeUpdateEvent = (event) => { 
     // Something 
    } 
} 

Cela fonctionne très bien, sauf si vous voulez étendre cette classe et remplacer une de ces méthodes.
La raison en est que les fonctions de flèches ne sont pas vraiment des méthodes, mais seulement des propriétés affectées de flèches, elles ne font pas partie du prototype.

Par exemple:

class A { 
    fn1 =() => { } 
    fn2() { } 
} 

Compile à:

var A = (function() { 
    function A() { 
     this.fn1 = function() { }; 
    } 
    A.prototype.fn2 = function() { }; 
    return A; 
}()); 

Donc, si vous ne se soucient pas d'être en mesure de remplacer facilement une de ces méthodes, utiliser cette méthode.

Si vous voulez rester avec des méthodes, mais ne veulent pas lier manuellement toutes les méthodes, vous pouvez:

constructor(video:HTMLVideoElement) { 
    super(); 
    this._video = video; 

    for (let key in this) { 
     if (typeof this[key] === "function") { 
      this[key] = this[key].bind(this); 
     } 
    } 

    this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent); 
} 

Vous pouvez également vérifier le nom de la fonction et des méthodes en quelque sorte préfixe que vous souhaitez lier .