VSCodeを使って素朴に素朴にNode + TypeScript

学習用に。

必要なもの

事前に準備するもの

Node.js
VSCode

途中でインストールするもの

typescript

手順

1. `npm init`

いろいろ聞かれますが全部Enterで返事しておきます。

2. `npm install typescript --save-dev` でTypeScriptのインストール

3. `npx typescript --init` で`tsconfig.json`を生成

4. 生成された`tsconfig.json`をいじる

"sourceMap: true" の行は使いたいのでコメントアウト解除
"outDir": "./" の行はコメントアウト解除して"outDir": "./dist" とでもしておきましょう。
"rootDir": "./src"などとすることで、ソースファイルのルートディレクトリを設定できます。

あとはそのままでいいんじゃないかなと思います。必要になったら変更で。

5. VSCode上でビルドの設定をする

エディタ上でコマンドパレットを開き(F1)、task configure taskと入力 => 「テンプレートからtasks.jsonを生成」でEnter => 「Others」を選びます。要は./.vscode/tasks.jsonができればいいです。
下記を参考にビルドタスクを追加します。labelはただの識別名なので適当で。

./.vscode/tasks.json

{
// tasks.json 形式の詳細についての資料は、
    // https://go.microsoft.com/fwlink/?LinkId=733558 をご覧ください
    "version": "2.0.0",
    "tasks": [
        {
            "label": "typescript build",
            "type": "shell",
            "command": "node ./node_modules/typescript/bin/tsc",
            "group": "build"
        }
    ]
}

6. VSCode上でデバッグの設定をする

エディタ左側のメニューから虫アイコンをクリックし、launch.jsonファイルを作成する
デバッグの種類を聞かれたらNode.jsを選択
生成されたlaunch.jsonをいじる
"program": "${workspaceFolder}\\dist\\index.js" のように変更して、実行するJSファイルのパスを変更。
typescriptにより生成されたファイルを実行したいので、distフォルダ内にある(これから作られるのでまだない)index.jsを指定。
デバッグする前にビルドしたいので、"preLaunchTask": "先ほど設定したタスクの適当な名前"を追記。

./.vscode/launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "プログラムの起動",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\dist\\index.js",
            "preLaunchTask": "typescript build"
        }
    ]
}

ここまでで環境構築自体は終わりです。お疲れ様でした。参考までにHelloWorldします。

7. `./src/index.ts`を作成

./src/index.ts

const hw: string = 'hello world';
console.log(hw);

あとはF5キーを押すことで、ビルド => 完了次第デバッグ開始されます。ブレークポイント置けば止まるし、普通にデバッグできます。

実体としてはかなり素朴な内容で、tscでビルドして、終わったらVSCode + Nodeのデバッガでデバッグするというものです。

VSCodeで「デバッグ前のタスク」を実行できるので、これを利用しています。

背景

Vue + TypeScriptをやったことがあるのですが、TypeScriptの設定はvue-cliに任せきりだったので、
Node.js + TypeScriptをシンプルに試してみたかったのでした。

参考

TypeScript + Node.js プロジェクトのはじめかた2019 - Qiita

筆者の環境

Windows 10
VSCode 1.14.1
Node.js v8.12.0