使用ts-node和vsc來調試TypeScript代碼

我以前寫過一篇用vsc+gulp來自動編譯ts並重啓程序的文章，不事後來發現這樣作的工做比較多並且有不少不足，好比

1. 運行或者調試須要等待編譯完成，項目大了以後編譯這一步仍是須要必定的時間的
2. 難以調試測試代碼，通常來講項目採用ts，測試代碼也應該採用ts去編寫，而採用編譯+sourcemap的方式就很難調試測試代碼

TS-NODE

能夠看出這些不足都來自於一個根本緣由，運行以前須要編譯。後來我就發現了一個很強大的工具ts-node，來看下ts-node的簡介:

TypeScript execution environment and REPL for node.

簡單的說就是它提供了TypeScript的運行環境，讓咱們免去了麻煩的編譯這一步驟。最簡單的例子，在註冊ts-node以後，咱們就能夠直接加載並運行ts文件

require('ts-node').register();

// 這樣就能直接加載並運行 ./ts-code.ts...
require('./ts-code');

TS Config

爲了斷點調試，咱們須要在tsconfig.json中開啓sourceMap

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
}

VSC Launch.json 配置

爲ts-node註冊一個vsc的debug任務，修改項目的launch.json文件，添加一個新的啓動方式

{
  "name": "Current TS File",
  "type": "node",
  "request": "launch",
  "args": [
    "${workspaceRoot}/src/index.ts" // 入口文件
  ],
  "runtimeArgs": [
    "--nolazy",
    "-r",
    "ts-node/register"
  ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

經過這些簡單的配置，咱們在vsc的debug界面中選擇Debug by ts-node的任務，就能夠開始愉快的調試了，修改代碼以後直接重啓服務便可，這裏簡單的介紹一些vsc debug相關的快捷鍵，參考

1. F5 - 開始調試、繼續執行
2. cmd(ctrl) + shift + F5 - 重啓
3. shift + F5 - 結束調試
4. F9 - 添加斷點
5. F10 - 單步跳過
6. F11 - 單步調試
7. shift + f11 - 單步跳出

調試當前打開ts文件

{
  "name": "Current TS File",
  "type": "node",
  "request": "launch",
  "args": [
    "${relativeFile}"
  ],
  "runtimeArgs": [
    "--nolazy",
    "-r",
    "ts-node/register"
  ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

調試 mocha 測試代碼

在launch.json中添加

{
  "name": "Debug Current TS Tests File",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/.bin/_mocha",
  "args": [
    "-r",
    "ts-node/register",
    "${relativeFile}", // 調試當前文件
    "--colors",
    "-t 100000" // 設置超時時間，由於調試時執行時間較長容易觸發超時
  ],
  "cwd": "${workspaceRoot}",
  "protocol": "inspector"
}

而後打開一個包含mocha單元測試的ts文件，添加斷點，運行Debug Current TS Tests File便可進行斷點調試。
運行項目中的全部單元測試建議在package.json中添加test腳本，好比

"scripts": {
  "test": "mocha -r ts-node/register src/**/*.spec.ts --colors"
}

而後運行npm test便可

例子

demo，這是我編寫的一個很是簡單的ts項目，包含了上述的全部配置，但願對您有用。