VSCode仅提供TypeScript编辑支持，编译和类型检查由tsc完成；需安装typescript包、配置tsconfig.json、启用sourceMap并正确设置outDir与outFiles以确保编译、调试和类型检查一致。
VSCode 本身不运行 TypeScript，它只提供编辑、类型提示和错误标记；真正完成编译（tsc）和类型检查的是 typescript 包里的命令行工具。配置的关键是让 VSCode 正确识别项目结构，并把 tsc 的输出、错误和 source map 对齐到编辑器中。
确认已全局或本地安装 typescript
VSCode 不自带 tsc，必须手动安装。否则点击“运行”或终端执行 tsc 会报 command not found 或 无法将“tsc”项识别为 cmdlet。
- 推荐在项目根目录用 npm 安装：运行
npm install --save-dev typescript
，然后通过npx tsc调用（避免全局污染且版本可控） - 若要用全局
tsc，执行npm install -g typescript
，再在终端输入tsc --version验证是否成功 - VSCode 的集成终端需重启才能识别新安装的全局命令（或新开一个终端标签页）
生成并理解 tsconfig.json
这是 TypeScript 项目的配置核心。没有它，tsc 只会编译单个文件，无法启用模块解析、路径别名、JSX 支持等关键特性。
- 在项目根目录运行
npx tsc --init
生成默认配置文件 - 务必检查并调整几个关键字段：
"target"（建议"ES2020"或更高）、"module"（通常"commonjs"或"ESNext"）、"outDir"（如"./dist"，必须和实际输出路径一致） -
"include"推荐显式声明："include": ["src/**/*"]
，避免node_modules或配置文件被误扫 - 如果用 import 路径别名（如
@/utils），必须配"baseUrl"和"paths"，且 VSCode 的 IntelliSense 才能跳转
在 VSCode 中触发编译与实时类型检查
VSCode 内置了 TypeScript 语言服务，只要项目有 tsconfig.json，就会自动启动类型检查——但这个检查是“内存中”的，不写入文件，也不生成 JS。要真正产出可运行代码，必须显式调用 tsc。
- 快捷键
Ctrl+Shift+B（Windows/Linux）或Cmd+Shift+B（macOS）可打开构建任务：首次使用会提示“配置任务”，选TSC: Watch - tsconfig.json即开启监听模式（保存即编译） - 想一次性编译，终端执行
npx tsc
；加--noEmit可仅做类型检查（适合 CI 场景） - VSCode 底部状态栏会显示 TypeScript 版本号，点击可切换工作区使用的 TS 版本（例如从插件内置版切到项目
node_modules里的版本） - 如果修改了
tsconfig.json，VSCode 不会自动重载，需手动点击右下角的 “TypeScript” 提示条 → “Restart TS server”
调试时源码映射失效？检查 sourceMap 和 outFiles
用 Debugger for Chrome 或 Node.js 启动时断点打不到 TS 源码，大概率是 source map 未生成或路径错位。
- 确保
tsconfig.json中启用了："sourceMap": true,
和"inlineSources": true
（后者让源码嵌入 map 文件，省去单独加载.ts文件） - 如果
outDir是./dist，则编译后.js和.js.map必须在同一目录；VSCode 的调试器靠sourceRoot字段定位原始.ts路径，若项目结构复杂（如 monorepo），可能需要手动设"sourceRoot": "../src" - launch.json 中的
outFiles字段应匹配 JS 输出位置，例如："outFiles": ["${workspaceFolder}/dist/**/*.js"]
最易忽略的一点：VSCode 的类型检查依赖 tsconfig.json 的存在和有效性，但编译行为完全由你执行的 tsc 命令决定——两者不自动同步。改了配置却不重跑 tsc，或者用了错误的 tsconfig.json 路径（比如多层子目录里有多个），都会导致编辑器提示和实际编译结果不一致。
