TypeScriptのデバッグ環境構築手順

はじめに

TypeScriptの開発環境構築手順は多く見られるのですが、
デバッグ環境構築手順については意外と見つからなかったので、
記事を作成しました。

初めての投稿になりますので、至らない点はあるかも知れませんが、
その点ご了承頂ければと思います。

開発環境の構築

Node.jsのインストール

Node.jsはJavaScriptをサーバサイドで動かすために必要なソフトウェアです。
TypeScriptコンパイラを動かすのにNode.jsが必要になるので最初にインストールします。
こちらからインストーラをダウンロードしてインストールしてください。

プロジェクトフォルダの初期化

まずはプロジェクトフォルダを作成してnpm initコマンドでNode.jsを初期化しましょう。
-yオプションはすべてのデフォルト設定でpackage.jsonを生成します。

$ mkdir typescript-sample
$ cd typescript-sample
$ npm init -y

TypeScriptとts-nodeのインストール

ここではTypeScriptとts-nodeをローカル環境にインストールします。

ts-nodeはTypeScriptファイルを直接実行できるように、
実行時にコードをJavaScriptにトランスパイルしてから実行します。

つまり、スクリプトを実行する際に、
事前にtscコマンドでコンパイルしてから実行する必要はないわけです。

$ npm install typescript ts-node

TypeScript設定ファイルの初期化

TypeScriptの設定ファイルを作成します。
以下のコマンド実行後にtsconfig.jsonが作成されます。

$ npx tsc --init

サンプルプログラムの実行

動作確認のためにサンプルプログラムを実行してみましょう。

sample.ts

const msg: string = "Hello, World!";
console.log(msg);

サンプルプログラムが用意できたらスクリプトを実行しましょう。
以下のように結果が表示されたら成功です。

$ node_modules/.bin/ts-node sample.ts
Hello, World!

デバッグ環境の構築

launch.jsonの作成

ここからはデバッグ環境の構築手順になります。
まずはデバッグする前に設定ファイル(launch.json)を作成します。
vscodeを開き以下の画像を参考にlaunch.jsonを作成してください。

launch.jsonの編集

launch.jsonを開き以下のように編集してください。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}",
            // -----ここから追加------
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node",
            "args": [
                "--transpile-only",
                "--respawn",
                "--project",
                "tsconfig.json"
            ],
            // -----ここまで---------
        }
    ]
}

デバッグの試行

サンプルプログラムにブレークポイントを貼り、F5でデバッグしてみましょう。
以下のようにブレークポイントで止まれば成功です。