Visual Studio CodeでTypeScript開発のノウハウ (ブラウザ編)

Visual Studio Code & TypeScriptを使い、ブラウザ用の開発設定についてのメモです。以下のような条件の開発設定です。

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

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

  • Visual Studio Code : 1.10.1
  • Node : 6.5.0
  • TypeScript : 2.2.1

Visual Studio CodeでTypeScript開発のノウハウ (ブラウザ編)

Visual Studio CodeでTypeScript開発のノウハウ (ブラウザ編)

以下のようなファイルが作成されます。

vscode/tasks.json

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

Visual Studio CodeでTypeScript開発のノウハウ (ブラウザ編)

以上の設定で、tsファイル側にブレークポイントを仕掛けてデバッグすることができます。また、TypeScriptのモジュール仕様も利用することができます。(export/import周りの仕様は、別途記事にしていきたいと思います。)

async/awaitも対応しています。例えば、mod.tsを以下のように書き換えます。

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については、こちらで紹介しています。)

まとめ

筆者のTypeScript環境(ブラウザ開発編)についてまとめました。とりあえず、大規模なものの開発に必要なモジュール部分とデバッガのアタッチ、TypeScriptで使えると便利なasync/await周りを利用できるための設定方法を紹介しました。

参考

カテゴリ:Default 時間:2017-03-16 人気:49
この記事では、 TypeScript VisualStudioCode

関連記事

Copyright (C) socapnw.com, All Rights Reserved.

Socapnw All Rights Reserved.

processed in 1.514 (s). 12 q(s)