Visual Studio Codeを使ったTypeScript開発 (ブラウザ編)

Visual Studio Code & TypeScript を使い、ブラウザ用の開発設定についてのメモです。

以下のような条件の開発設定です。

複数の TypeScript ファイルに分割して開発
TypeScript のコードは、Node.js からも利用できる（Module 対応）
Visual Studio Code からデバッグできる
TypeScript の async/await 構文に対応する

この記事で扱う環境のバージョンは以下の通りです。

表1:

Visual Studio Code	1.10.1
Nod.js	6.5.0
TypeScript	2.2.1

環境構築

TypeScript 関連のセットアップが終わったら、Visual Studio Code に Debugger for Chrome 拡張機能をインストールします。もし、Chrome がインストールされていない場合は、Chrome もインストールします。

tsconfig.json

TypeScript のプロジェクトのディレクトリ（.ts ファイルが置いてあるディレクトリ）に、「tsconfig.json」というファイルを作成し、設定を記述します。以下のような感じです。

{
    "compilerOptions": {
    "target": "ES5",
    "module": "amd",
    "sourceMap": true,
    // 出力するファイル名を指定
    "outFile": "./src/main.js",
    "lib": [
            "dom",
            "es5",
            "scripthost",
            "es2015.promise"
    ]
    }
}

ポイントは 3 つ

modlue に amd を設定（AMD 形式のモジュールを使用）
outFile を指定（今回は、./src/main.js を指定しましたが、ここは場合によって変更してください）
lib を指定（特に、「es2015.promise」が重要です）

modlue を指定しない場合、トランスパイルされたファイルが outFile に指定されたファイルにすべて結合されて出力されるため、ブラウザ上で動作させる場合、こちらの方が便利かもしれません。modlue に amd を指定しているため、outFile の設定は必須ではありません。ただ、これを設定しないと、ts ファイルごとに js ファイルと map ファイルが生成され、ディレクトリが汚れます。そのため、少なくとも開発中は一つの js ファイルにまとめるように設定しています（もしくは、outDir で出力ディレクトリを変えるのも良いかもしれません。）。lib の指定は、async/await を使うために、重要です。await で待つ関数は Promise オブジェクトを返さないといけないのですが、ここで指定しておかないと、インテリセンスに文句を言われました。そのほかのライブラリはデフォルトのもののようです。

.vscode/tasks.json

「.vscode/tasks.json」ファイルがない場合、プロジェクトのビルド（Ctrl+Shift+B）を行うと、「タスクランナーが構成されていません。」と出ると思います。そこで、右端の「タスクランナーの構成」をクリックし、「TypeScript – tsconfig.json」を選択します。すると、「.vscode/tasks.json」が作成されます。内容は特に編集する必要はありません。

.vscode/launch.json

次に、デバッグ用の設定を記述します。デバッグを開始すると、デバッグ構成を選択できますが、デフォルトですとあまりいい感じにならないため、手動で「.vscode/launch.json」ファイルを作成し、以下のように記述します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Local",
            "type": "chrome",
            "request": "launch",
            // 読み込むHTMLファイルを指定
            "file": "${workspaceRoot}/index.html",
            "trace" :true,
            "sourceMaps": true,
            "runtimeArgs": [
                "--allow-file-access-from-files"
            ]
        }
    ]
}

このように記述すると、デバッグを開始すると、ディレクトリ下の「index.html」ファイルを Chrome で開き、デバッグができるようになります。「runtimeArgs」に「– allow-file-access-from-files」を渡しておくことで、ローカルファイルを読み込むような JavaScript の実行もデバッグできます。ちなみに、すでに Chrome が起動しているといろいろとうまくいきませんので、一旦終了しておく必要があります（Mac の場合は、プロセスを終了させておきます）。もし、起動中の Chrome を使用したい場合は、request に attach を指定し、Chrome の起動設定を変更する必要があります。

index.html

Chrome から最初に読み込む HTML ファイルを記述します。以下のような感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> Test </title>
</head>
<body>

<!-- javascriptの読み込み -->
<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
<script data-main="./src/main.js" src="require.js"></script>

</body>
</html>

AMD 方式でトランスパイルするように設定したため、HTML から JavaScript ファイルを読み込むためには、RequireJS を使用します。「require.js」ファイルをダウンロードし、index.html と同じディレクトリに配置してください。そして、

<script data-main="./src/main.js" src="require.js"></script>

のように「data-main」を使って、対象の JavaScript ファイルを読み込むようにします。また、TypeScript で async/await を使う場合、Promise が必要になるのですが、Promise は IE11 では対応していないため、PolyFill のライブラリも読み込むようにしておきます。

テスト

プロジェクトディレクトリは、以下のようなファイル構成とします。

.vscode
	launch.json
	tasks.json
index.html
require.js
main.ts
module.ts
src
	main.js
	main.js.map

このうち、「launch.json」「tasks.json」「index.html」「require.js」は先に述べた通りです。また、「src」ディレクトリ以下はビルドすると自動生成されます。main.ts と mod.ts は、以下の通りです。なお、エントリポイントとなる ts ファイルの名前とトランスパイル後の js ファイルの名前は同じにしておく必要があるようです。

コード1: main.ts

import Hello = require("./mod");
var hello:Hello = new Hello();
hello.Show();

コード2: mod.ts

class Hello {
    public Show() {
        console.log("Hello!!");
    }
}
export = Hello;

以下、注意事項です。

エントリポイントとなる ts ファイルとトランスパイル後の js ファイル名とが異なった場合、実行されません
module.ts というファイル名にすると、いろいろとトラブりました

デバッグを開始すると、Chrome が起動します。ただ、ブレークポイントの設定が間に合わないのか、うまくブレークポイントを設定しても止まらないことがあります。その場合、Visual Studio Code の方から「再起動」するとうまくいきました。

以上の設定で、ts ファイル側にブレークポイントを仕掛けてデバッグすることができます。また、TypeScript のモジュール仕様も利用することができます。また、async/await も対応しています。例えば、mod.ts を以下のように書き換えます。

コード3: mod.ts

class Hello {
    showDelay() {
        return new Promise(resolve => {
            window.setTimeout(
                () => {
                    console.log("Hello 2");
                    resolve();
                },
                1000);
        });
    }

    public async Show() {
        console.log("Hello 1");
        await this.showDelay();
        console.log("Hello 3");
    }
}
export = Hello;

これを実行すると、Hello 1 が出力されたのちに、1 秒後に Hello2 → Hello 3 と表示されます。IE11 でも問題なく動作します。（Promise については、こちらで紹介しています。）

参考にしたサイト

RequireJS 使い方メモ