JavaScript から TypeScript への移植手順

![Node.js](http://nodejs.org/images/logos/nodejs.png "Node.js")
![TypeScript](http://www.typescriptlang.org/content/images/logo_small.png "TypeScript")

## はじめに
この記事では、JavaScript ネイティブで書かれたコードをそのまま TypeScript のソースとしてコンパイル・実行できるということを示し、また、[DefinitelyTyped](https://github.com/borisyankov/DefinitelyTyped) から定義ファイルをダウンロードすることにより、インテリセンス(オートコンプリート)を使った開発ができるようにする手順を示す。(手順のメモ)

## JavaScript のスーパーセットだから、JavaScript 資産がそのまま再利用できます。

↓Visual Studio のメニューから「ファイル」⇒「新規作成」⇒「プロジェクト」を選択する。以下のようなダイアログが表示されるので、左のペインで TypeScript を選択して「Blank Node.js Console Application」を選択する。「名前」と「場所」を確認して OK をクリックする。
![2014-0511-1825.png](https://qiita-image-store.s3.amazonaws.com/0/32879/7892d96e-3fca-f35b-e0fe-b96d8bb95dee.png)

↓「console.log('Hello world');」のみを含んだメインプログラム(app.ts)が開かれる。
![2014-0511-1832.png](https://qiita-image-store.s3.amazonaws.com/0/32879/187d8e1b-041d-f14b-4997-220334aaee1c.png)

「console.log('Hello world');」を消して、以下のソースを貼り付ける。
> (以下のソースは、[NodeとRubyとPythonでスクレイピング](http://qiita.com/nenjiru/items/2b0b1a26ee78bc7721a5) からの引用です。)

```ts:app.ts
var request = require('request'),
    cheerio = require('cheerio');

var url = 'http://google.co.jp';

request(url, function (error, response, body) {
    if (!error && response.statusCode === 200) {
        var $ = cheerio.load(body),
            title = $('title').text();
        console.log(title);
    }
});
```

Ctrl+Shift+B を押してビルドするとエラーなしにコンパイルできる。
コンパイル後、Ctrl+F5 で「デバッグなしで開始」を実行する。

↓request モジュールをインストールしていないので実行時エラーとなる。
![2014-0511-1842.png](https://qiita-image-store.s3.amazonaws.com/0/32879/abb6a086-6f3f-49ed-899a-ac6a52943c6e.png)

## Visual Studio から npm を呼び出せます

↓ソリューションエクスプローラーから npm を右クリックし、Manage npm Modules... を選択(クリック)する。
![2014-0511-1846.png](https://qiita-image-store.s3.amazonaws.com/0/32879/43923812-868a-fd3b-69f7-4e5c38f2b0fd.png)

↓ダイアログの上部にあるテキストボックスに「request」と入力してモジュールを絞り込む。
request というモジュールを選択して Install をクリックする。
![2014-0511-1852.png](https://qiita-image-store.s3.amazonaws.com/0/32879/14566394-af2e-18f7-69d6-3ade0a1b384d.png)

↓少し待つと、Installed Locally という表示がついて request モジュールがインストールされたことが確認できる。
![2014-0511-1854.png](https://qiita-image-store.s3.amazonaws.com/0/32879/523f96c0-8161-573d-19cc-61ce2bbc0ab2.png)

↓ソリューションエクスプローラーでも request モジュールがインストールされていることが分かる。
![2014-0511-1858.png](https://qiita-image-store.s3.amazonaws.com/0/32879/1e750559-9249-fe16-7bd8-5c8c0b7c8100.png)

↓Ctrl+Shift+B を押してビルドした後、再び Ctrl+F5 で「デバッグなしで開始」を実行する。
今度は cheerio というモジュールがないと怒られる。
![2014-0511-1900.png](https://qiita-image-store.s3.amazonaws.com/0/32879/363f0bbb-7d17-ab4c-2182-405ebf4c4831.png)

↓ソリューションエクスプローラーから npm を右クリックし、Manage npm Modules... を選択(クリック)し先ほどと同様の手順で cheerio モジュールをインストールする。
![2014-0511-1905.png](https://qiita-image-store.s3.amazonaws.com/0/32879/13506411-f823-0775-e2a6-79b4af0f67b2.png)

## 実行時エラーはなくなったが、コンソール画面がすぐとじてしまう

↓Ctrl+Shift+B を押してビルドした後、再び Ctrl+F5 で「デバッグなしで開始」を実行する。
今度は実行時エラーとならず成功した。
![2014-0511-1908.png](https://qiita-image-store.s3.amazonaws.com/0/32879/1c5d55b3-9740-cf13-2d73-d74cfafb23e0.png)

↓実行は成功したのだが、結果を表示した瞬間にコンソール画面が閉じてしまって動作確認が困難だったので調べてみたら、以下の設定をすることでキーを押すまでコンソール画面が閉じないようにできることがわかった。
「ツール」⇒「オプション」を選択し、ダイアログの左ペインから Node.js Tools を選択し、「Wait for input when process exits normally」にチェックを入れる(デフォルト(初期)設定ではチェックが入ってない)。
![2014-0512-2328.png](https://qiita-image-store.s3.amazonaws.com/0/32879/b7cc3869-7438-cefb-978f-c97172fc1c0b.png)

↓このように「Press any key to continue...」と表示されて止まるようになった。
![2014-0512-2334.png](https://qiita-image-store.s3.amazonaws.com/0/32879/c68a2efd-5eb4-1b8c-46e4-1e13b4d6f87e.png)

## インテリセンスを効かせるために import を使ってモジュールを参照する

次に、request モジュールと cheerio モジュールの定義情報を用いてインテリセンス(オートコンプリート)が働くように設定する。
先ほどのソースを次のように変更する。require のある行の var を import に修正する。

```ts:app.ts
import request = require('request');
import cheerio = require('cheerio');

var url = 'http://google.co.jp';

request(url, function (error, response, body) {
    if (!error && response.statusCode === 200) {
        var $ = cheerio.load(body),
            title = $('title').text();
        console.log(title);
    }
});
```

↓外部モジュールの定義が見つからずエラー(コンパイルエラー)となる。
定義ファイルをダウンロードしてくる必要がある。
![2014-0511-1915.png](https://qiita-image-store.s3.amazonaws.com/0/32879/7470769c-93c2-7833-dea3-d7425dcbd5de.png)

定義ファイルをダウンロードするには次のサイトにアクセスする
　⇒ https://github.com/borisyankov/DefinitelyTyped

↓プロジェクトが新規に作成された直後は node.d.ts しか定義ファイルがない。
node.d.ts は Node.js のビルトインのモジュールの定義情報を含んでいる。
![2014-0511-1921.png](https://qiita-image-store.s3.amazonaws.com/0/32879/9f002c17-f37d-8a24-f1b9-db21d4a77cc4.png)

request.d.ts, cheerio.d.ts に加えて依存関係にある form-data.d.ts もダウンロードして加えた。
![2014-0511-1926.png](https://qiita-image-store.s3.amazonaws.com/0/32879/1453cce9-a12e-aa5d-0bf9-a5b0b1659aee.png)

↓そうするとコンパイルエラーが消えて、インテリセンス(オートコンプリート)も有効となった。
![2014-0511-1941.png](https://qiita-image-store.s3.amazonaws.com/0/32879/e1c2dbf1-a1f5-643d-6227-af1a06238d88.png)

↓ 定義(.d.ts)ファイルをソリューションエクスプローラーで追加した際に陥る罠がある。
追加した各定義ファイルをソリューションエクスプローラー上でクリックして下段のプロパティを確認してほしい。Build Action が TypeScriptCompile になってれば OK だが、その他の設定だと定義ファイルが認識されない(有効にならない)から気をつけてほしい。
![2014-0511-2028.png](https://qiita-image-store.s3.amazonaws.com/0/32879/f6e3393d-5555-3cf3-da84-97c1251c2402.png)

## 終わりに
[DefinitelyTyped](https://github.com/borisyankov/DefinitelyTyped)には主要な(ネイティブ)JavaScript ライブラリに対応する定義ファイルがアップされているので、使いたいライブラリがあれば、まずこのサイトをチェックしてほしい。
この記事の文章内容は時を追って修正していくつもりである。