付録

ソースマップ

このエントリーをはてなブックマークに追加
最終更新日 2016-12-31

以下に示すのは単純なクラスと console.log() を使用した TypeScript のソースコードです。

class Foo {
    constructor(private x: string) {
    }

    public result(): string {
        return this.x;
    }
}
var foo = new Foo("TypeScript");
console.log(foo.result());

このソースコードをコンパイルして生成された JavaScript ファイルを、例えば Google Chrome で実行した場合、 console.log() の結果はデベロッパーツールの Console に出力されます。

当然、デベロッパーツールは TypeScript ではなく JavaScript のソースコード(main.js の 11 行目)を参照します。

ソースマップを利用すると、コンパイル前の TypeScript のソースコードを参照するようになるため、デバッグしやすくなります。 次に示すのは、ソースマップを利用する手順です。

まず、コンパイル時にソースマップ用のコンパイラオプションを指定します。

tsc --sourcemap --mapRoot /~foo/map --sourceRoot /~foo/src main.ts

コンパイラオプションの意味は次の通りです。

オプション 説明
--sourcemap .map ファイルを出力する
--mapRoot デバッガが参照する .map ファイルの場所を指定する
--sourceRoot デバッガが参照する .ts ファイルの場所を指定する

コンパイルが成功すると、.map ファイルと .js ファイルが生成されます。 .js ファイルには、以下のようにソースマップ用のコメントが追加されます。

var Foo = (function () {
    function Foo(x) {
        this.x = x;
    }
    Foo.prototype.result = function () {
        return this.x;
    };
    return Foo;
})();
var foo = new Foo("TypeScript");
console.log(foo.result());
//# sourceMappingURL=/~foo/map/main.js.map

次に、各ファイルをコンパイラオプションで指定した場所に移動します。

場所 説明
/~foo/map/main.js.map --mapRoot オプションで指定した場所に .map ファイルを 置く
/~foo/src/main.ts --sourceRoot オプションで指定した場所に .ts ファイルを 置く
/~foo/main.js ソースマップ用のコメントが含まれる .js ファイル
/~foo/index.html .js ファイルを読み込む HTML ファイル

最後に、Web ブラウザの設定をします。Google Chrome の場合はデベロッパーツールで [F1] キーを押し、 [Settings] の [General] 内にある [Enable JS source maps] にチェックを入れます。

これで、Google Chrome で /~foo/index.html を開いた際に、デベロッパーツールは TypeScript のソースコード(main.ts の 10 行目)を参照するようになります。