调试TS代码

方案1 调用ts-node

创建launch.json文件

创建.vsocde>launch.json文件：

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "TS-node-debug",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
      "cwd": "${workspaceRoot}",
      "args": ["${relativeFile}"],
      "console": "integratedTerminal",
      "sourceMaps": true,
      "stopOnEntry": false // 是否启动后自动停止程序
    }
  ]
}

打开要调试的文件，按快捷键F5即可再控制台看到调式结果。

方案2 先编译后调试

使用编译后的代码调试，这种方法可以在ts中打断点，然后调试的时候会走到ts代码中，但是如果你想跳入一个方法内部，如果没有在这个方法内部打断点的话，vscode会进入到编译后的js代码里面，这可能不是你想要的。

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "preLaunchTask": "npm: compile",
    "program": "${workspaceFolder}/src/app.ts",
    "sourceMaps": true,
    "smartStep": true,
    "internalConsoleOptions": "openOnSessionStart",
    "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
    ]
},

packege.json中的compile命令

"compile": "rimraf dist/ && tsc --pretty && copyfiles -u 1 src/config/*.json src/*.js dist/"

这种方法就是先将ts代码编译成js，然后就可以直接调试没有问题了。