JavaScript から TypeScript への移植手順

はじめに

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

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

↓Visual Studio のメニューから「ファイル」⇒「新規作成」⇒「プロジェクト」を選択する。以下のようなダイアログが表示されるので、左のペインで TypeScript を選択して「Blank Node.js Console Application」を選択する。「名前」と「場所」を確認して OK をクリックする。

↓「console.log('Hello world');」のみを含んだメインプログラム(app.ts)が開かれる。

「console.log('Hello world');」を消して、以下のソースを貼り付ける。

(以下のソースは、NodeとRubyとPythonでスクレイピング からの引用です。)

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 モジュールをインストールしていないので実行時エラーとなる。

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

↓ソリューションエクスプローラーから npm を右クリックし、Manage npm Modules... を選択(クリック)する。

↓ダイアログの上部にあるテキストボックスに「request」と入力してモジュールを絞り込む。
request というモジュールを選択して Install をクリックする。

↓少し待つと、Installed Locally という表示がついて request モジュールがインストールされたことが確認できる。

↓ソリューションエクスプローラーでも request モジュールがインストールされていることが分かる。

↓Ctrl+Shift+B を押してビルドした後、再び Ctrl+F5 で「デバッグなしで開始」を実行する。
今度は cheerio というモジュールがないと怒られる。

↓ソリューションエクスプローラーから npm を右クリックし、Manage npm Modules... を選択(クリック)し先ほどと同様の手順で cheerio モジュールをインストールする。

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

↓Ctrl+Shift+B を押してビルドした後、再び Ctrl+F5 で「デバッグなしで開始」を実行する。
今度は実行時エラーとならず成功した。

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

↓このように「Press any key to continue...」と表示されて止まるようになった。

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

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

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);
    }
});

↓外部モジュールの定義が見つからずエラー(コンパイルエラー)となる。
定義ファイルをダウンロードしてくる必要がある。

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

↓プロジェクトが新規に作成された直後は node.d.ts しか定義ファイルがない。
node.d.ts は Node.js のビルトインのモジュールの定義情報を含んでいる。

request.d.ts, cheerio.d.ts に加えて依存関係にある form-data.d.ts もダウンロードして加えた。

↓そうするとコンパイルエラーが消えて、インテリセンス(オートコンプリート)も有効となった。

↓ 定義(.d.ts)ファイルをソリューションエクスプローラーで追加した際に陥る罠がある。
追加した各定義ファイルをソリューションエクスプローラー上でクリックして下段のプロパティを確認してほしい。Build Action が TypeScriptCompile になってれば OK だが、その他の設定だと定義ファイルが認識されない(有効にならない)から気をつけてほしい。

終わりに

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