Visual Studio Code で TypeScript をはじめよう

Visual Studio Code が最近ナウいらしいですね。
Visual Studio Code (以下 VS Code) において TypeScript 開発する方法をご紹介します。

Windows / Mac 共通です。

インストール

VS Code

https://code.visualstudio.com/
からインストーラーをダウンロードして実行。

Node.js

https://nodejs.org/en/
からインストーラーをダウンロードして実行。 PATH は通します。

TypeScript

npm install -g typescript  

VS Code の起動と設定

File → Preferences → User Settings と選ぶと settings.json を編集できます。

お好みに合わせて編集します。

TypeScript を書いてみる

まずは File → Open Folder... でプロジェクトフォルダを指定します。今回はフォルダを新規作成してそれを選択します。

tsconfig.json の作成

このボタンを押すと新規ファイルが作れます。 tsconfig.json を作成します。

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}

内容はこんな感じです。保存します。

hello.ts の作成

さっきと同じ手順で hello.ts ファイルを作成します。

class Hello {  
    private count = 0;

    public constructor() {
        console.log('Hello World');
    }

    public tick(): void {
        ++this.count;
        console.log('count', this.count);
    }
}

var hello = new Hello();

function main() {  
    hello.tick();
    setTimeout(main, 1000);
}

main();  

こんにちはと世界に挨拶してからカウントアップするだけのやつです。

保存したら早速次はビルドです。

ビルド

VS Code には task runner という機能があり、任意のタスクを実行することができます。
これを使って TypeScript を JavaScript に変換してみましょう。

.vscode/tasks.json を作る

F1 キーを押して Command Palette を出し、 configure task.. と入力して Enter キー。

このように .vscode フォルダと tasks.json が生成されるので

今回は tasks.json の内容を全て削除して下記の内容にします。

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

コピペするといいと思います。

ビルドタスクの実行

Ctrl+Shift+Btasks.json で設定した内容が実行されます。

実行してみると、

このように hello.jshello.js.map が生成されます。

これで実行・デバッグの準備が整いました。

ちなみに、 Gulp 等もタスクにすることができます。

デバッグ

.vscode/launch.json の作成

  1. Debug ビューを表示
  2. Start (F5) を押すと環境選択できるので
  3. Node.js を選択

launch.json を今回の構成に合わせて書き換えます。

  1. "program": "hello.js"
  2. "sourceMaps": true

保存します。

実行してみる

Start ボタンを押すか F5 キーを叩くと実行開始します。

このように表示されるはずです。

Stop ボタンを押すと止まります。

ブレークポイント

TypeScript ソースコード上でブレークポイントを設定してデバッグしてみます。

行番号のすぐ隣、矢印で示したところをクリックすると赤い丸が表示されます。これがブレークポイントです。18行目の setTimeout にブレークポイントを置いてみましょう。

そして実行。

どうでしょう? count 1 で止まりましたか? Start (F5) を押すと再開されます。

このように TypeScript も VS Code 上でデバッグも簡単に行うことができます。

よろしければお試しください ☺

ちなみに、私は昨日はじめて VS Code をインストールしました。

参考