VSCode如何配置TypeScript开发与编译【教程】

vscode不编译typescript，需tsc完成；须安装tsc、配置tsconfig.json（含target/outDir/include）、设置tasks.json监听和launch.json的preLaunchTask及sourceMap。

VSCode 本身不编译 TypeScript，它只提供语法支持和智能提示；真正的编译必须由 tsc（TypeScript 编译器）完成，VSCode 只是调用它或监听其输出。

确认已安装 tsc 并在终端可用

很多人卡在这一步：以为装了 VSCode 就能编译 TS，结果右键“编译”没反应，或者 npm run build 报 tsc: command not found。

• 全局安装（推荐初学者）：npm install -g typescript，然后在终端运行 tsc --version 确认输出版本号
• 项目本地安装（更稳妥）：npm install --save-dev typescript，之后用 npx tsc 调用（VSCode 任务默认会识别 npx）
• windows 用户注意：PowerShell 或 CMD 中若提示命令不存在，先关掉 VSCode 再重开，确保 PATH 刷新

生成并理解 tsconfig.json 的关键配置项

没有 tsconfig.json，tsc 会降级为“仅检查语法”，不会生成 JS 文件——这也是常见“写了 .ts 却没产出 .js”的原因。

• 最简有效配置只需两行：

  { "compilerOptions": { "target": "ES2020", "outDir": "./dist" }, "include": ["src/**/*"] }

• "noEmit": true 是调试时的隐藏陷阱：它禁用所有输出，但类型检查照常，容易误以为编译失败
• "rootDir" 和 "outDir" 必须成对出现且路径不重叠，否则 tsc 可能把 dist 里的 JS 当源码二次编译，导致循环错误
• 开发中建议加 "sourceMap": true，否则断点调试会跳到编译后的 JS 行，而不是你写的 TS 行

用 VSCode 自动任务触发 tsc 监听模式

手动敲 tsc -w 太原始，VSCode 的 tasks.json 可以绑定快捷键（如 Ctrl+Shift+B），还能在问题面板直接定位报错。

• 按 Ctrl+Shift+P → 输入 “Tasks: Configure Task” → 选 “Create tasks.json from template” → “TypeScript – tsconfig.json”
• 生成的 tasks.json 里确保 "isBackground": true 和 "problemMatcher": "$tsc-watch" 存在，否则保存后不会自动重编译
• 如果终端报 File change detected. Starting incremental compilation... 但没生成文件，大概率是 tsconfig.json 里 "outDir" 路径写错，或 "include" 没覆盖到你的 .ts 文件

调试时别忽略 launch.json 的 preLaunchTask

直接 F5 启动 node.js 调试却报“找不到 .js 文件”，往往是因为调试前没先编译——TS 文件还没变成可执行的 JS。

• 在 .vscode/launch.json 的配置中，必须指定：

  "preLaunchTask": "tsc: build - tsconfig.json"

  （任务名需与 tasks.json 中 label 一致）

• 若使用 nodemon 或 ts-node，那是绕过编译的运行方式，和本题的“配置编译”目标不同，不要混用
• sourceMap 必须为 true，且 launch.json 中 "outFiles" 要指向 dist/**/*.js，否则断点无效

真正麻烦的不是配置步骤，而是错误信息不指向真实原因：比如 tsc 静默不输出，大概率是 tsconfig.json 路径不对或被父目录的同名文件干扰；而调试断点失效，90% 出在 sourceMap 和 outFiles 的路径匹配上。