2016年12月09日

初めてのTypeScript (5) - Visual Studio Code(Mac)でTypeScript

   このエントリーをはてなブックマークに追加 Clip to Evernote
これは TypeScript Advent Calendar 2016 の9日目の記事です。 


えー、前回までVisual Studio 2015を使っていたのですが、export/importでつまずいてしまってので、Visual Studio Code + node.jsの環境で、TypeScriptに再挑戦です。

今回は、Macを使っています。といっても、WindowsでもCommandキーをControlキーと読み替えてもらえれば、Windowsでもほとんどそのまま適用できる内容だと追います。

スクリーンショットを撮っていませんが、普通のプログラマーならば、文字だけでも大丈夫かと思います。


インストール

まずは、Visual Studio codeとnode.js をインストールします。この二つはダウンロードして、インストーラを起動するだけなので難しいことはありません。

それぞれのバージョンは以下のとおりです。

Visual Studio Code : 1.7.2
node.js : 6.9.1


次に、TypeScriptをインストールします。ターミナルを起動し、以下のコマンドを入力します。

npm install -g typescript

でも、このインストールで失敗してしまいました。メッセージを読むと、権限が不足しているらしいです。普通のMacのカジュアルユーザの僕には、Mac/Unixについて疎いので対処方法がよくわかりません。
調べたら、以下のようなコマンドを実行すれば良さげ。

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

再度、

npm install -g typescript

でインストール。今度は成功しました。TypeScriptのバージョンは、2.0.10 でした。
 

必要なプログラムのインストールが終わったので、Visual Studio Code(以下、VSCode)を起動します。


以降は、以下のページを参考にしながら、試しています。

https://code.visualstudio.com/Docs/languages/typescript


tsconfig.jsonの作成

TypeScriptのプログラムソースファイルを置く任意のフォルダーを開きます。

このフォルダに、tsconfig.jsonというファイルを作成し、以下のような内容を記述します。

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


プログラムコードの入力

次に、同じフォルダーに、HelloWorld.ts ファイルを作成します。ここにTypeScriptのコードを書きます。

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();


ビルドの構成

次に、Shift+Command+P を押し、コマンドパレットを出します。

Configure までタイプすると、候補が出てくるので「タスクランナーの構成」を選んで、Enterを押します。

すると、またドロップダウンの一覧が表示されますので、「TypeScript - tsconfig.json. 」を選びます。

これにより、以下にようなtasks.json ファイルが、 .vscodeフォルダーに作成されます。

{
     // See http://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
     "version": "0.1.0",
     "command": "tsc",
     "isShellCommand": true,
     "args": ["-p", "."],
     "showOutput": "silent",
     "problemMatcher": "$tsc"
}


ビルドの実行

Shift+Command+B でビルドします。

問題がなければ、HelloWorld.tsのある同じフォルダに、HelloWorld.jsファイルが作成されます。


デバッグ環境の設定

いよいよ、デバッグです。Shift+Command+Dでデバッグペイン?を表示させます。

VSCodeのデバッグペインの左上に「デバッグ」というボタンがあるので、それをクリックします。
環境の選択の一覧の中から、「node.js」を選択します。
すると、以下のようなlaunch.jsonファイルが、.vscodeフォルダに作成されます。

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "プログラムの起動",
            "program": "${workspaceRoot}/app.js",
            "cwd": "${workspaceRoot}",
            "outFiles": [],
            "sourceMaps": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "プロセスに添付",
            "port": 5858,
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

このファイルのapp.js を HelloWorld.js に書き換えて保存します。


デバッグの実行

再度、デバッグボタンを押します。F5キーを押してもデバッグを開始できます。

VSCodeの下に、デバッグコンソールに結果が表示されます。
デバッグコンソールが表示されない場合は、Shift+Command+Yで表示できます。
 

Visual Studio 2015と同様、ブレークポイントを設定してデバッグすることもできます。


-----

Visual Studio Codeは、Visual Studioと違って、All in One の環境ではないので、いちいち設定ファイルを自分で記述しないといけないのが面倒です。なんでもGUIで設定できるVisual Studioに慣れすぎた体にはちょっと辛いです。数十年前に戻ってしまったようなそんな感じです。あの頃は、環境設定も楽しい時間でしたが、今は面倒だなって思う気持ちのほうが勝ってます...

まあ、なんとか Visual Studio CodeでTypeScriptをビルド+デバッグする環境が整いました。




 



 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52479574