TypescriptでjQuery使っててハマったので。

アロー関数便利！！！って言いながら次のようなコードを書くと意図した通りに動きません。

damenayatsu.ts

$(function(){
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.btnlist').mousehover(()=>{
    $(this).css('background-color', 'red');
  });
})

これをJavascript(ES5)へトランスパイルすると次のようなコードが生成されます。

damenayatsu.js

$(function(){
  var _this = this; //あっ
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.nanikano-list').mousehover(function() {
    //あっ
    $(_this).css('background-color', 'red');
  });
})

言語仕様については僕も詳しくないのですが、どうやらアロー関数のthisはES5のように「その関数を呼んだオブジェクト」ではなく「その関数を呼んだオブジェクトの親」を指すようです。
C++などのオブジェクト指向言語におけるクラスメソッドでのthisのような挙動ということですね。
とりあえずですが、これについては以下の様なコードで対応しました。

iiyatsu.ts

$(function(){
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.btnlist').mousehover(function() { //アロー関数をあきらめる
    $(this).css('background-color', 'red');
  });
})

Typescript感がゼロに・・・。
もっといい方法があればご教授ください。。。

追記

これを書いた当時は全くJavaScriptを知らなかったのもあってかなり荒唐無稽な結論で終わっていましたが、次のように書くとよさそうです。

new.ts

$(() => {
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.btnlist').hover((event: MouseEvent) => {
    $(event.target).css('background-color', 'red');
  });
});

thisなんて必要なかったんや…。