如何在vscode中调试typescript?

前置知识

首先要知道vsocde是无法调试typesript的。所以我们要做的就是将typescript编译为javascript，然后告诉vscode编译后的代码位置，这样才能进行调试。

流程

1 在项目根目录创建launch.json配置

// package.json

{
  "name": "debug-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // .vscode/launch.json会执行这里的命令
    "build": "tsc"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.4.5"
  }
}

// .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      // 需要调试的代码入口
      "program": "${workspaceFolder}/src/index.ts",
      // 将代码编译为javascript的package命令（对应package.json的script build命令）
      "preLaunchTask": "npm: build",
      // 编译后的代码位置
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
    }
  ]
}

2 配置tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // 需要跟.vscode/launch.json中的outFiles呼应
    "outDir": "./dist",
    "rootDir": "./src",
     // 必须启用以支持断点调试
    "sourceMap": true
  }
}