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),还能在问题面板直接定位报错。
本书图文并茂,详细讲解了使用LAMP(PHP)脚本语言开发动态Web程序的方法,如架设WAMP平台,安装与配置开源Moodle平台,PHP程序设计技术,开发用户注册与验证模块,架设LAMP平台。 本书适合计算机及其相关专业本、专科学生作为学习LAMP(PHP)程序设计或动态Web编程的教材使用,也适合对动态Web编程感兴趣的读者自觉使用,对LAMP(PHP)程序设计人员也具有一定的参考价值。
- 按
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 的路径匹配上。









