'Bu' in typescript için bir takma var mı?

Kapsamı thisok fonksiyonu sözdizimi kullanırken korunur () => { ... }- buradan alınan bir örnek JavaScript programcılar için typescript .

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

Not this.textverir Text from outer functionok fonksiyonu sözdizimi "sözcük kapsamını" korur çünkü.

İşlev tanımlamak için ok sözdizimi kullanarak, diğer bazı yanıtlar kapsadığı gibi başvurular neden thishep kapsayan sınıfına başvurmak için.

Yani soruyu cevaplamak için, burada iki basit geçici çözümler vardır.

Ok sözdizimi kullanılarak yöntemi Referans

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

ok sözdizimi kullanarak yöntemi tanımlayın

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

Sen yapıcısı onun örneğine üye işlev bağlayabilir.

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
    }
}

Eğer işleyici eklerken Alternatif sadece bağlamak.

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

Steven Ickman çözümü kullanışlı ama eksik. Danny Becket ve Sam'in cevapları daha kısa ve daha manuel, ve dinamik ve lexically kapsamlı hem "bu" aynı zamana ihtiyacı bir geri arama sahip aynı genel durumda başarısız. Aşağıda benim açıklama TL ise benim kod atlama; DR ...

Ben "bu" dinamik kütüphane geri aramaları ile kullanılmak üzere kapsama alınması için korumak gerekir ve ben olması gereken bir "bu" sınıf örneğine sözcük kapsama alınması ile. Ben etkili sınıf örneği üzerinden parametre kapatılması icar, bir geri arama jeneratörüne örneğini geçmek en zarif olduğunu savunuyorlar. Bunu yaparken cevapsız eğer derleyici söyler. Ben lexically kapsamlı parametresi "outerThis" çağıran kuralı, ancak "kendini" kullanabilir veya başka bir isim daha iyi olabilir.

"Bu" anahtar kelime kullanımı OO dünyasından çalınmış ve typescript (sanırım ECMAScript'e 6 spesifikasyonları) o zaman kabul, onlar bir yöntemdir farklı bir varlık tarafından arandığı her bir lexically kapsamlı kavram ve dinamik kapsamlı kavram, conflated edilir . Bu işte biraz kızgın değilim; Bunu ortadan lexically kapsamlı nesne örneğini el böylece ben daktilo bir "öz" anahtar kelimesini tercih ediyorum. Alternatif olarak, JS gerekli (ve böylece bir çırpıda tüm web sayfaları kırmak) olduğunda açık bir birinci pozisyon "arayan" parametresini gerektirecek şekilde yeniden tanımlandı olabilir.

İşte (büyük bir sınıftan çıkartıldı) benim çözüm. yöntemler denir gidiş yönünden özellikle bir kaz ve özellikle de "dragmoveLambda" gövdesini atın:

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;
        }
    }

}

Bunu dene

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
    }

}

Sen js eval işlevini kullanabilirsiniz: var realThis = eval('this');

Typescript geri 'gerçek' almak için herhangi bir ekstra yol (düzenli JavaScript demektir ötesinde) sağlamaz thisdışında referans thishiçbir mevcut JS kodu beri arka compat perspektiften izin verilen olan (yağ ok lambda sözdiziminde sağlanan remapping kolaylık bir kullanıyor olabilir =>) ifade.

Sen codeplex sitesine bir öneri göndermek, ancak bir dil tasarım açısından bu kadar muhtemelen orada değil olabilir olabilir derleyici zaten var olan JavaScript kodu tarafından kullanılıyor olabilir sağlayabilir herhangi aklı başında, anahtar kelime, burada ne.

Ben benzer bir sorun ile karşı karşıya kaldılar. Kullanabileceğin düşünüyorum .each()tutmak için birçok durumda thisdaha sonraki olaylar için farklı bir değer olarak.

JavaScript yol:

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

Typescript yol:

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

Bu kimse yardımcı olur.

her şeyden cevaplar çok daha basit bir çözüm yoktur. Temelde biz anahtar kelime işlevini kullanarak yerine kullanarak JavaScript geri düşmek '=>' 'Bu' halinde sınıfı 'bu' tercüme hangi inşa

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'); 
    }
}

Bu blog yazısı kontrol edin http://lumpofcode.blogspot.com/2012/10/typescript-dart-google-web-toolkit-and.html içinde ve typescript sınıfları arasında aramaları düzenlemek için tekniklerin ayrıntılı bir tartışma vardır.

Bu hizmeti kullanmak için başvuru depolayabilir this.. başka bir değişkende selfbelki ve bu şekilde başvuru erişin. Ben typescript kullanmayın, ama bu geçmişte vanilya javascript ile benim için başarılı olmuştur bir yöntem.