Y at-il un alias pour « ce » dactylographiée?

Le champ d'application thisest conservée lorsque vous utilisez la syntaxe de la fonction flèche () => { ... }- voici un exemple tiré de tapuscrit Pour les programmeurs JavaScript .

var ScopeExample = { 
  text: "Text from outer function", 
  run: function() { 
    setTimeout( () => { 
      alert(this.text); 
    }, 1000); 
  } 
};

Notez que this.textvous donne Text from outer functionparce que la syntaxe de la fonction flèche préserve la « portée lexicale ».

Comme couvert par quelques - unes des autres réponses, en utilisant la syntaxe de flèche pour définir une fonction provoque des références à thistoujours se référer à la classe englobante.

Donc, pour répondre à votre question, voici deux solutions de contournement simples.

La méthode de référence en utilisant la syntaxe de flèche

constructor(public id: string) {
    this.textarea = $(id);
    this.textarea.focusin(e => this.onFocusIn(e));
}

Définition de la méthode utilisant la syntaxe de la flèche

onFocusIn = (e: JQueryEventObject) => {
    var height = this.textarea.css('height');
}

Vous pouvez lier une fonction membre à son instance dans le constructeur.

class Editor {
    textarea: JQuery;

    constructor(public id: string) {
        this.textarea = $(id);
        this.textarea.focusin(onFocusIn);
        this.onFocusIn = this.onFocusIn.bind(this); // <-- Bind to 'this' forever
    }

    onFocusIn(e: JQueryEventObject) {
        var height = this.textarea.css('height');   // <-- This is now fine
    }
}

Sinon, bind quand vous ajoutez le gestionnaire.

        this.textarea.focusin(onFocusIn.bind(this));

La solution de Steven Ickman est à portée de main, mais incomplète. Danny Becket et les réponses de Sam sont plus courtes et plus manuel, et ne parviennent pas dans le même cas général d'avoir un rappel qui a besoin à la fois dynamique et lexicalement scope « ce » en même temps. Passer à mon code si mon explication ci-dessous est TL; DR ...

Je dois préserver « cette » pour la portée dynamique pour une utilisation avec callbacks bibliothèque, et je dois avoir un « ce » avec une portée lexicale à l'instance de classe. Je soutiens qu'il est le plus élégant de passer l'instance dans un générateur de rappel, laissant effectivement la fermeture des paramètres sur l'instance de classe. Le compilateur vous indique si vous avez manqué le faire. J'utilise une convention d'appeler le paramètre « scope outerThis lexicalement », mais « moi » ou un autre nom peut - être mieux.

L'utilisation du « ce » mot-clé est volé dans le monde OO, et quand tapuscrit a adopté (à partir ECMAScript 6 spécifications Je présume), ils confondait un concept lexicalement scope et un concept dynamique scope, chaque fois qu'une méthode est appelée par une autre entité . Je suis un peu vexé à ce; Je préférerais un mot-clé « auto » en caractères d'imprimerie afin que je puisse remettre l'instance d'objet scope lexicalement hors de lui. Alternativement, JS pourrait être redéfinie comme exigeant une première position de paramètre « appelant » quand il est nécessaire (et donc briser toutes les pages Web d'un seul coup).

Voici ma solution (excisé une grande classe). Prenez un coup d'oeil en particulier la façon dont les méthodes sont appelées, et le corps de « dragmoveLambda » en particulier:

export class OntologyMappingOverview {

initGraph(){
...
// Using D3, have to provide a container of mouse-drag behavior functions
// to a force layout graph
this.nodeDragBehavior = d3.behavior.drag()
        .on("dragstart", this.dragstartLambda(this))
        .on("drag", this.dragmoveLambda(this))
        .on("dragend", this.dragendLambda(this));

...
}

dragmoveLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
    console.log("redefine this for dragmove");

    return function(d, i){
        console.log("dragmove");
        d.px += d3.event.dx;
        d.py += d3.event.dy;
        d.x += d3.event.dx;
        d.y += d3.event.dy; 

        // Referring to "this" in dynamic scoping context
        d3.select(this).attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

        outerThis.vis.selectAll("line")
            .filter(function(e, i){ return e.source == d || e.target == d; })
            .attr("x1", function(e) { return e.source.x; })
            .attr("y1", function(e) { return e.source.y; })
            .attr("x2", function(e) { return e.target.x; })
            .attr("y2", function(e) { return e.target.y; });

    }
}

dragging: boolean  =false;
// *Call* these callback Lambda methods rather than passing directly to the callback caller.
 dragstartLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
        console.log("redefine this for dragstart");

        return function(d, i) {
            console.log("dragstart");
            outerThis.dragging = true;

            outerThis.forceLayout.stop();
        }
    }

dragendLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void}  {
        console.log("redefine this for dragend");

        return function(d, i) {
            console.log("dragend");
            outerThis.dragging = false;
            d.fixed = true;
        }
    }

}

Essaye ça

class Editor 
{

    textarea: JQuery;
    constructor(public id: string) {
        this.textarea = $(id);
        this.textarea.focusin((e)=> { this.onFocusIn(e); });
    }

    onFocusIn(e: JQueryEventObject) {
        var height = this.textarea.css('height'); // <-- This will work
    }

}

Vous pouvez utiliser la fonction eval js: var realThis = eval('this');

Tapuscrit ne fournit aucun moyen supplémentaire (au - delà des moyens JavaScript réguliers) pour revenir à la « vraie » thisréférence autre que la thiscommodité remappant fourni dans la syntaxe de graisse flèche lambda ( ce qui est admissible dans une perspective de back-compat puisqu'aucun code JS existant pourrait utiliser une =>expression).

Vous pouvez poster une suggestion sur le site CodePlex, mais d'un point de vue de la conception du langage il n'y a probablement pas grand - chose qui peut arriver ici, car un mot clé sain d' esprit le compilateur pourrait fournir peut - être déjà utilisé par le code JavaScript existant.

J'ai fait face à un problème similaire. Je pense que vous pouvez utiliser .each()dans de nombreux cas pour maintenir thisune valeur différente pour les événements ultérieurs.

La façon JavaScript:

$(':input').on('focus', function() {
  $(this).css('background-color', 'green');
}).on('blur', function() {
  $(this).css('background-color', 'transparent');
});

La façon dactylographiée:

$(':input').each((i, input) => {
  var $input = $(input);
  $input.on('focus', () => {
    $input.css('background-color', 'green');
  }).on('blur', () => {
    $input.css('background-color', 'transparent');
  });
});

J'espère que ça aidera quelqu'un.

Il y a une solution beaucoup plus simple que toutes les réponses ci-dessus. Fondamentalement, nous retombons à JavaScript en utilisant la fonction de mot-clé au lieu d'utiliser « => » construire qui se traduira par « ceci » dans la classe « ce »

class Editor {
    textarea: JQuery;

    constructor(public id: string) {
        var self = this;                      // <-- This is save the reference
        this.textarea = $(id);
        this.textarea.focusin(function() {   // <-- using  javascript function semantics here
             self.onFocusIn(this);          //  <-- 'this' is as same as in javascript
        });
    }

    onFocusIn(jqueryObject : JQuery) {
        var height = jqueryObject.css('height'); 
    }
}

Découvrez ce blog http://lumpofcode.blogspot.com/2012/10/typescript-dart-google-web-toolkit-and.html , il a une discussion détaillée des techniques pour l' organisation des appels à l' intérieur et à travers les classes tapuscrit.

Vous pouvez stocker votre référence à thisune autre variable .. selfpeut - être, et accéder à la référence de cette façon. Je ne me tapuscrit, mais c'est une méthode qui a été couronnée de succès pour moi avec javascript vanille dans le passé.