如何在vscode中配置TypeScript环境并编译代码【教程】

VS Code 中 typescript 不编译是因为缺少 tsc 编译器而非插件；需安装 typescript（推荐本地 npm install –save-dev typescript），配置 tsconfig.json，并通过 tasks.json 设置 tsc 监听任务实现保存自动编译。

VS Code 里 TypeScript 不报错但不编译，缺的是 tsc 而不是插件

VS Code 自带 TypeScript 语言服务（语法检查、跳转、补全），但默认**不会自动编译 .ts 文件为 .js**。你看到的“类型检查正常”只是编辑器在用内置 TS Server 做静态分析，和编译完全无关。真正触发编译需要外部命令 tsc —— 它来自 TypeScript 编译器包，必须显式安装。

• 全局安装：npm install -g typescript（之后终端能直接运行 tsc）
• 项目本地安装更推荐：npm install --save-dev typescript，然后通过 npx tsc 调用
• 装完后在终端执行 tsc -v，确认输出版本号（如 5.4.5），否则后续所有编译步骤都无效

tsconfig.json 是编译行为的唯一控制中心

没有 tsconfig.json，tsc 只会做最基础的单文件转换（且忽略所有配置），无法处理模块、路径别名、JSX、目标环境等关键逻辑。必须手动初始化或创建它。

• 在项目根目录运行 npx tsc --init，生成默认配置文件
• 关键字段要手动改：比如 "outDir": "./dist" 指定输出目录，"rootDir": "./src" 声明源码位置，"target": "ES2020" 控制生成 JS 版本
• 如果项目含 JSX，必须设 "jsx": "react-jsx"；用 node.js 后端则建议 "module": "commonjs"
• 删掉 // 开头的注释行——tsc 不认注释，会导致解析失败

{   "compilerOptions": {     "target": "ES2020",     "module": "commonjs",     "lib": ["ES2020", "dom"],     "outDir": "./dist",     "rootDir": "./src",     "strict": true,     "esModuleInterop": true,     "skipLibCheck": true,     "forceConsistentCasingInFileNames": true   },   "include": ["src/**/*"] }

用 tasks.json 把 tsc 接进 VS Code 快捷键

不想每次打开终端敲 npx tsc？VS Code 的任务系统可以绑定到快捷键（如 Ctrl+Shift+B），但前提是正确配置 .vscode/tasks.json。

• 按 Ctrl+Shift+P → 输入 “Tasks: Configure Task” → 选 “Create tasks.json from template” → 选 “Others”
• 替换内容为以下结构，重点看 command 和 args：本地安装就用 npx tsc，全局安装可直接写 tsc
• isBackground 设为 true 才能支持监听模式（--watch），否则每次编译完就退出

{   "version": "2.0.0",   "tasks": [     {       "label": "tsc: watch",       "type": "shell",       "command": "npx tsc",       "args": ["--watch"],       "group": "build",       "isBackground": true,       "problemMatcher": ["$tsc-watch"]     }   ] }

配好后按 Ctrl+Shift+B，选择 “tsc: watch”，终端就会启动监听——保存 .ts 文件自动重新编译。

常见报错直接对应配置项

编译失败时，错误信息里的关键词基本能定位到 tsconfig.json 的哪个字段没设对：

• Cannot find module 'xxx' → 检查 "baseUrl" 和 "paths" 是否配了路径映射，或 "moduleResolution" 是否为 "node"
• JSX element type does not have any construct or call signatures → "jsx" 没设，或 "lib" 缺 "DOM"
• 输出 JS 里还有 import/export 未被转换 → "module" 值不匹配运行环境（浏览器要用 "ESNext"，Node 用 "commonjs"）
• Error TS5055: Cannot write file ... because it would overwrite input file → "outDir" 和 "rootDir" 路径重叠，比如都设成了 "./src"

编译是纯命令行行为，和 VS Code 主题、插件开关、设置里的 “TypeScript > Suggest: auto Imports” 都无关。只要 tsc 能在终端跑通，VS Code 里的编译任务就大概率能跑通。