TypeScriptでjQueryを使うときはアロー関数式とfunction()の使い分けに注意

2013-11-05にQiitaに投稿した記事のアーカイブです。本文中のリンクは動作しないことがあります。

TypeScriptではthisの解釈が生のJavaScriptと違いすっきりしているのですが、なんでもかんでもTypeScript流の書き方にしてしまうとハマります。

javascript.js

jQuery(document).ready(function () {
    $('td').each(function () {
        // 何らかの処理
        $(this).replaceWith('<td>' + foo + '</td>');
    });
});

これはJavaScriptのjQuery each処理です。（個人的な好みですが、TypeScript中にjQueryが登場するので先頭のみjQueryを明言しています。）

TypeScriptでは(function(){ //処理 });という内容を(()=>{ //処理 });という風にアロー関数式で書くことができます。thisのスコープ解釈がJavaScriptと異なるためにコンパイラにTypeScriptであると認識させるためのものらしいのですが、全ての箇所でこの表記を使ってしまったためハマりました。

##注意点

typescript.ts

jQuery(document).ready(()=>{   // ここはアロー関数式
    $('td').each(function () { // ここは使ってはダメ!!
        // 何らかの処理
        $(this).replaceWith('<td>' + foo + '</td>');
    });
});

結論からいうと、jQueryの.each()ではアロー関数式を使ってはいけません。その内部の$(this)が取り出せなくなり、見たこともないエラーを吐きます。他はアロー関数式でも、jQueryオブジェクトの取得に関しては今までどおりの記法でいくべきなんですね。

TypeScriptクイックガイドの『3. 言語仕様 > 9. this キーワード』にちゃんと書いてありました。総ざらいしないとだめですね。TypeScriptは発展途上のようなので、2013年11月5日現在の情報ということで。