VSCode不自带TS编译能力，必须依赖tsc工具；需手动配置tsconfig.json并安装typescript，通过Tasks实现保存即编译或监听编译，tsc仅转译TS为JS，不处理模块加载、服务启动或打包。
VSCode 本身不自带 TypeScript 编译能力，但开箱即支持 TS 语法检查和智能提示；真正要实现「保存即编译」或「项目级构建」，必须靠 tsc（TypeScript Compiler）配合配置文件驱动，而不是靠插件“一键搞定”。
确认已安装全局或本地 tsc
TypeScript 的编译行为完全由命令行工具 tsc 控制，VSCode 只是调用它。没装 tsc，所有配置都无效。
- 运行
tsc --version检查是否可用；若报 “command not found”，说明未安装 - 推荐优先使用项目本地安装：
npm install --save-dev typescript，然后通过npx tsc调用 - 全局安装（不推荐）：
npm install -g typescript—— 容易因版本混用导致tsconfig.json行为不一致 - 注意：VSCode 内置的 TS 语言服务版本（右下角显示）和你项目里
tsc版本可以不同，前者只管提示，后者才管编译
必须手写 tsconfig.json，不能依赖 VSCode 自动生成
VSCode 的「初始化 tsconfig」命令（Ctrl+Shift+P → “TypeScript: Configure Tsconfig”）只生成极简骨架，缺关键项会导致编译结果不符合预期，比如输出目录错乱、模块解析失败、或者根本不出 .js 文件。
- 最小可用配置至少包含：
"compilerOptions": { "outDir": "./dist", "rootDir": "./src", "module": "commonjs", "target": "ES2020", "strict": true } - 务必显式设置
"include"（如["src/**/*"]），否则tsc默认只处理当前目录下的 .ts 文件，子目录可能被忽略 - 如果项目含 Node.js 代码，需加
"types": ["node"]并安装@types/node，否则require、process等会报错 - 别开
"noEmit": true—— 这个选项会让tsc只做类型检查，不生成 JS，适合纯检查场景，但不是“开发编译环境”所需
用 Tasks 配置保存时自动编译，而非装一堆插件
所谓「实时编译」在 TS 中实际是「保存后触发一次 tsc --watch 或单次 tsc」。VSCode 原生 Tasks 就够用，无需额外插件（如 Auto Compile、TypeScript Hero 等），反而更可控。
- 按 Ctrl+Shift+P → “Tasks: Configure Task” → “Create tasks.json from template” → “Others”
- 填入以下内容（适配本地
tsc路径）：
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: watch",
"type": "shell",
"command": "./node_modules/.bin/tsc --watch",
"isBackground": true,
"problemMatcher": ["$tsc-watch"],
"group": "build"
}
]
}
- 保存后，Ctrl+Shift+P → “Tasks: Run Build Task” → 选 “tsc: watch”，终端将启动监听；修改 .ts 文件后自动编译
- 如果想保存即编译（非监听），把 command 改成
npx tsc，并删掉"isBackground": true和"problemMatcher" - 注意：
tsc --watch在某些 WSL 或网络盘环境下会失灵，此时退回单次编译 + 手动触发更稳
tsc 不处理 HTML/CSS，也不启动服务器 —— 别指望它做 Webpack 的事
很多新手误以为配好 tsc 就能直接在浏览器跑 TS，结果打开 index.html 是白屏。这是因为 tsc 只负责 .ts → .js 转换，不解决模块加载、路径映射、热更新或 HTTP 服务问题。
- 浏览器直接运行 ES Module：需在
tsconfig.json中设"module": "ESNext"，且 HTML 中用<script type="module" src="./dist/index.js"></script> - 想自动刷新浏览器？得另配
live-server或vscode-live-server插件，和 TS 编译解耦 - 需要打包、代码分割、CSS 处理？该上
webpack或vite了，tsc不是构建工具 - 最常被忽略的一点：TS 编译后的 JS 默认不带 source map，调试时看不到原 TS 代码 —— 记得在
tsconfig.json加"sourceMap": true
