TypeScriptのthisについて

TypeScriptで開発をしていて、thisキーワードで引っかかってしまったので、共有したいと思います。

具体的には、JavaScriptとTypeScriptでthisの扱いが異なるために問題が発生しました。

TypeScriptで、関数の定義方法が２つあり、ラムダ式の

var lambda = () => {
   // 処理
}

と、function式の

var func = function() {
  // 処理
}

があります。

その中でも、２つ目のfunctionを用いたものについては、thisを定義し直す必要があって、ラムダ式を使う前に

var _this = this;

として、function中では定義し直した_thisを使う必要があります。

通常のthisを使うと、未定義状態になっています。

なぜそうなっているかというと、TypeScriptをコンパイルしてJavaScriptにした時に本来は自動的に_thisに置き換わるのですが、functionを用いたものでは置き換わらないためです。

僕はこのサイトをみて問題を解決したので、詳しく知りたい方は参照してみてください。