VSCodeでExpress + TypeScriptの環境構築

Angularに合わせてサーバーサイドもTypeScriptで実装しようとしたらデバッグ方法で躓いたので備忘録。
webpackやgulpを使わずになるべくシンプルな方法でトランスパイルしたくてやり方を調べました。

# 実行環境
Windows 8.1 64bit

- VSCode

```
C:\dev>code -v
1.25.1
1dfc5e557209371715f655691b1235b6b26a06be
x64
```

- Node.js

```
C:\dev>node -v
v8.11.3

C:\dev>npm -v
6.4.1
```


# Express
npmでインストールします。TypeScriptで実装する場合は型定義ファイルもインストールする必要があります。

package.jsonは後程編集するため、デフォルトで作成します。

```
mkdir sample
cd sample

npm init
```

```
npm i --save express
npm i --save-dev @types/express
```

# TypeScript
.tsから.jsへのトランスパイルはtypescriptで行います。

```
npm i --save-dev typescript
```

# トランスパイルの設定

tsconfig.jsonを作成し、トランスパイルの設定を記述します。

```
C:\dev\sample>node_modules\.bin\tsc --init
message TS6071: Successfully created a tsconfig.json file.
```

sourceMapをtrueに設定します。
ECMAのバージョンや出力先はお好みで。

``` tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "outDir": "",                        /* Redirect output structure to the directory. */
    "strict": true,                           /* Enable all strict type-checking options. */
  }
}
```

# VSCodeのタスク設定
VSCodeからtypescript(tsc)によるトランスパイルを行うための設定をします。

1.タスクメニュー > タスクの構成 から「tsc:ビルド」を選択します。
![タスク設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407695/1a3f4dc2-8547-f114-6e2b-b00d981b066d.png)
選択するとtasks.jsonが作成されます。

2.tasks.jsonを編集します。
このタスクをデバッグ実行前に行うタスクとして設定するため、labelを追加します。
今回はtscとしていますが、名前は何でもOKです。

```tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "label": "tsc",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ]
        },
    ]
}
```

# サンプルコードの作成
Expressサーバーを立ち上げるだけの簡単なコードを作成します。

プロジェクトフォルダ直下に、以下のようなapp.tsファイルを作成します。

```app.ts
import * as express from 'express';

var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
```

# VSCodeのデバッガの設定
1.Ctrl+Shift+D でデバッガメニューを開きます。
![デバッガ設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407695/8dc02b39-bb76-6150-3a0a-fff57f91c26f.png)


2.「構成の追加」を選択します。
選択すると自動的にlaunch.jsonファイルが作成されます。

3.launch.jsonファイルの編集
以下のように編集し、上述したタスクによるtscトランスパイルを事前実行します。

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

"program"でデバッグするファイルを指定します。
${relativeFile}は開いているファイルと関連するファイルを対象にデバッグを実行します。

# package.jsonの編集
"main"をapp.jsに直し、不要な項目は削除します。

```package.json
{
  "name": "sample",
  "version": "1.0.0",
  "main": "app.js",
  "dependencies": {
    "express": "^4.16.4"
  },
  "devDependencies": {
    "@types/express": "^4.16.1",
    "typescript": "^3.4.5"
  }
}
```

# デバッグ実行
ソースの行番号の左側をクリックすることでブレークポイントを設定します。

![ブレークポイント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407695/5ff4c907-7b63-0231-e4c4-d4f3ca33ccef.png)

あとはF5キーで起動するだけです！

ブレークポイントを設定した箇所で止めることができます。

![デバッグ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407695/893beba4-1691-6309-0aef-3d4e5bc1f784.png)

もう1度F5キーを押して再開させ、ブラウザでhttp://localhost:3000/にアクセスします。

6行目で再度中断されるので、F5キーで再開させます。
以下のように表示されれば成功です！
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407695/ad7de662-bc20-4995-3737-0cd5fe2c42c0.png)

## 参考
https://qiita.com/kurogelee/items/cf7954f6c23294600ef2
https://blog1.erp2py.com/2018/09/vscode-typescript.html