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上でビルドの設定をする

1. エディタ上でコマンドパレットを開き(F1)、task configure taskと入力 => 「テンプレートからtasks.jsonを生成」でEnter => 「Others」を選びます。要は./.vscode/tasks.jsonができればいいです。
2. 下記を参考にビルドタスクを追加します。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上でデバッグの設定をする

1. エディタ左側のメニューから虫アイコンをクリックし、launch.jsonファイルを作成する
2. デバッグの種類を聞かれたらNode.jsを選択
3. 生成された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