在VSCode中运行和调试TypeScript的完整指南

19次阅读

首先安装node.jstypescriptvscode扩展,初始化tsconfig.json配置编译选项,设置package.json脚本实现构建与运行,再通过launch.json和tasks.json配置调试任务,最后利用sourceMap在VSCode中对TypeScript文件设断点并启动调试,或使用ts-node直接运行以简化开发流程。

在VSCode中运行和调试TypeScript的完整指南

要在VSCode中顺利运行和调试TypeScript,关键在于正确配置开发环境。TypeScript本身不能直接在Node.js中执行,必须先编译成javaScript。下面是如何在VSCode中完成这一流程的完整说明。

1. 安装必要的工具

确保你的系统已安装以下工具:

  • node.jsnpm:用于运行TypeScript编译器和脚本
  • TypeScript 编译器(tsc):通过npm全局安装:
    npm install -g typescript
  • VSCode:推荐安装以下扩展:
    • ESLint(可选)
    • Prettier(可选)

2. 初始化项目并配置 tsconfig.json

进入项目目录,运行以下命令初始化TypeScript配置:

tsc –init

这会生成一个 tsconfig.json 文件。建议修改以下常用选项:

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

这样TypeScript会把 src 目录下的 .ts 文件编译到 dist 目录。

3. 添加运行脚本(package.json)

如果还没有 package.json,运行:

npm init -y

然后添加编译和运行脚本:

"scripts": {   "build": "tsc",   "start": "node dist/index.js",   "dev": "tsc && node dist/index.js" }

现在你可以用 npm run dev 编译并运行程序。

4. 在VSCode中设置调试配置

点击左侧调试图标,然后点击“创建 launch.json”文件,选择 Node.js 环境。VSCode会生成 .vscode/launch.json。修改内容如下:

在VSCode中运行和调试TypeScript的完整指南

面试猫

AI面试助手,在线面试神器,助你轻松拿Offer

在VSCode中运行和调试TypeScript的完整指南 39

查看详情 在VSCode中运行和调试TypeScript的完整指南

{   "version": "0.2.0",   "configurations": [     {       "name": "Launch Program",       "type": "node",       "request": "launch",       "program": "${workspaceFolder}/src/index.ts",       "preLaunchTask": "tsc: build",       "outFiles": ["${workspaceFolder}/dist/**/*.js"],       "skipFiles": ["<node_internals>/**"]     }   ] }

注意:program 指向的是 .ts 源文件,但实际执行的是编译后的 .js。VSCode借助 sourceMap 实现断点映射。

你还需要定义 preLaunchTask 对应的构建任务。打开 .vscode/tasks.json(没有则创建),内容如下:

{   "version": "2.0.0",   "tasks": [     {       "label": "tsc: build",       "type": "shell",       "command": "tsc",       "options": {         "cwd": "${workspaceFolder}"       },       "group": "build",       "presentation": {         "echo": true,         "reveal": "silent"       },       "problemMatcher": ["$tsc"]     }   ] }

5. 开始调试

现在你可以在 .ts 文件中设置断点,按 F5 启动调试。VSCode会自动:

  • 运行 tsc 编译代码
  • 启动 Node.js 执行 dist/index.js
  • 将源码断点映射到运行时行为

调试控制台会显示输出,变量、调用等面板均可正常使用。

6. 可选:使用 ts-node 简化流程

如果你不想手动编译,可以使用 ts-node 直接运行TypeScript:

npm install -D ts-node

修改 launch.json:

{   "name": "Run with ts-node",   "type": "node",   "request": "launch",   "runtimeExecutable": "npx",   "runtimeArgs": ["ts-node", "src/index.ts"],   "console": "integratedTerminal" }

这种方式无需预编译,适合开发阶段快速迭代。

基本上就这些。只要配置好 tsconfig、launch.json 和 task,VSCode就能高效运行和调试TypeScript。关键是理解编译与执行的流程,以及sourceMap如何连接源码与运行代码。

text=ZqhQzanResources