Typescriptによるjsdo.itの投稿について

この記事はTypeScript Advent Calendarの3日目の記事です。

jsdo.itは株式会社カヤックが2010年に起ち上げたサービスで、HTML、CSS、JavaScriptを編集してその場で実行、共有するプログラマ向けコミュニティサイトです。
当初はJavaScriptだけでしたが、現在はJSX、CoffeeScript、TypeScriptに対応しています。
※言語の変更方法 help - jsdo.it - Share JavaScript, HTML5 and CSS

TypeScriptの特徴といえば静的な型チェックがあることです。
jQuery などの著名なライブラリに対しては既に型定義ファイルが提供されており、TypeScriptの先頭行に下記を追記して使う。

/// <reference path="jquery.d.ts" />

jsdo.itでもコード編集画面で「Add Library」ボタンを使うことで、jQuery等のメジャーなライブラリを使うことが出来る。参照:http://jsdo.it/help#help_load_library

先頭行に記述してみると下記のエラーが出てしまう

error TS5007: Cannot resolve referenced file: 'jquery.d.ts'.

reference pathに指定している「jquery.d.ts」は、jsdo.it内部で用意されているわけではないようだ。
とすると、それならURIで指定すればいいのではと検索してみると、同じことをやろうとしている質問を発見した。

しかし、この回答を翻訳してみると「.d.ts」のファイルは実行時​に必要とされないからprivateに置けってらしい。それにreference pathは、基本は相対パスを指定するようだ。

定義ファイルは一旦あきらめ、TypeScriptでjQueryを使って単純に"Hello world!!"を表示しようとして、
下記のように記述してみたが「Could not find symbol '$'.」エラ－となった。

$("#hoge").text("Hello world!!");

ネットで検索してみると、下記サイトの「外部JavaScriptライブラリの利用（例：jQueryの利用）」

に下記の記述を見つけた。

「declare var jQuery: any;」というコードは、jQueryという名前のオブジェクトの型が「any」であること（つまり、JavaScriptのオブジェクトであること）を宣言（declare）している。この宣言により、「jQuery(document).ready(() => { ... }」という記述をしても、TypeScript上でエラーにならなくなるというわけだ。このdeclareキーワードによる宣言は、「アンビエント宣言（Ambient Declarations、環境宣言）」と呼ばれる。

この記事を参考に下記のようにしてみると、jsdo.it上のTypeScriptでも「Hello world!!」を表示することが出来た。

declare var $: any; 
declare var jQuery: any;
$("#hoge").text("Hello world!!");
jQuery("#hoge2").text("Hello world2!!");

any型が嫌だという場合、必要最低限のインターフェイスと型注釈を書き加えるように修正すればいいでしょう。
そうすれば、わざと関数呼び出しの型を間違えてみたり識別子をタイプミスすると、 ちゃんとコンパイルエラーが出ます。
参照：enchant.js に勝つには 熱いハートとクールな TypeScript だ - jsdo.it - Share JavaScript, HTML5 and CSS