typescript已经成为了很多前端或画图项目的必选项。
这里如何在最常用的编辑器vscode中直接调试typescript的代码。
所用示例参考和修改自网络资料。
1 工具安装
这里假设vscode已安装。
1.1 安装nvm
nvm(node version manager)，就是一个node的版本管理工具。
https://github.com/nvm-sh/nvm
日常开发中，可能有多个项目，不同项目之间使用的node版本很可能不同。
不可能在切换项目时，把node卸载了再重新安装，所以就需要nvm来进行node版本的切换。
mac、linux等安装也很简单，运行一个脚本即可，具体参考nvm github链接。s
1.2 安装node
在vscode调试typescript，往往需要使用ts-node或tsx等工具。
node在24以上支持运行ts文件，可以直接进行调试。
这里用nvm安装node24以上版本，比如24.3.0。
# nvm install 24.3.0
并验证安装是否成功
# node -v
v24.3.0
1.3 全局node
打开vscode，在没有进入项目前，设置将v24.3.0设置为全局版本。
要不vscode由可能不会选择v24.3.0，选择之前安装的版本。
nvm use v24.3.0
nvm alias default v24.3.0
2 vs调试
node安装后，就可以直接在vs中构建调试环境了。
先用vscode打开一个文件夹，表示创建一个用于测试的空项目。
1 环境初始化
在vscode打开term工具，安装pnpm
npm install -g pnpm
否则运行pnpm init有可能报如下错误
pnpm init
zsh: command not found: pnpm
运行pnpm init初始化
pnpm init
会创建package.json文件，示例如下
{
"name": "typescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@10.29.2"
}
2.2 测试程序
新建如下test.ts文件，这里为在数组中寻找和为target的两个数。
// test.ts const towSum = (nums: number[], target: number): number[] => { const map = new Map(); for (let i = 0; i < nums.length; i++) { const complement = target - nums[i]; if (map.has(complement)) { return [map.get(complement), i]; } map.set(nums[i], i); } return []; }; console.log(towSum([2, 7, 11, 15], 9));2.3 配置文件
点击vscode中下图所示位置，创建调试配置文件。
选择Node.js调试器
选择Node.js后，当前工作区生成了.vscode，包含一个launch.json配置文件。
在launch.json中写入如下配置，最关键的就是runtimeVersion选项，表示运行时的版本，这里就是指node的版本，一定要指定为我们刚才安装的24及以上的版本。
json复制代码
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "runtimeVersion": "24.3.0", // node版本，关键配置，指定为刚才安装的24以上的版本，否则调试会报错 "name": "Launch Program", "skipFiles": [ "<node_internals>/**" ], "program": "${workspaceFolder}/test.ts", // 要调试的程序,这里使用${file}表示当前打开的文件 "outFiles": [ "${workspaceFolder}/**/*.js" ], "console": "integratedTerminal", // 在内置集成终端中运行 } ] }2.4 开始调试
在创建好的test.ts中打断点进行调试，然后一次按如下图示点击
就能看到进入调试界面，示例如下
这里的"Launch Program"是刚才在launch.json中配置的调试器名称。
程序停在断点处，可以查看当前上下文信息，并执行单步调试等等操作。
reference
---
nvm
https://github.com/nvm-sh/nvm
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
https://jishuzhan.net/article/1949394693254590466
NVM 设置“全局（default）”node 版本，使新打开的终端（shell）为指定的node版本
https://blog.csdn.net/JCM_ZZ/article/details/128880109
