typescript代码安装调试示例-深圳市維司達科技有限公司

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", // 在内置集成终端中运行 } ] }