怎样在VSCode中配置TypeScript开发与编译环境【教程】-VSCode-PHP中文网

VSCode不自带TS编译能力，必须依赖tsc工具；需手动配置tsconfig.json并安装typescript，通过Tasks实现保存即编译或监听编译，tsc仅转译TS为JS，不处理模块加载、服务启动或打包。

怎样在vscode中配置typescript开发与编译环境【教程】

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 文件。

typescript-advanced-types

精通 TypeScript 高级类型系统，包括泛型、条件类型、映射类型、模板字面量类型与工具类型，用于构建类型安全的应用。在实现复杂类型逻辑、创建可复用类型工具

下载

最小可用配置至少包含："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