关键在于本地 tsc 参与开发流程:初始化项目、启用 tsconfig.json 的 strict 模式,VSCode 自动识别并提供类型检查、补全与跳转;通过 npm run build:watch 实现保存时监听编译,配合 ESLint/Prettier 等增强体验。

直接上手配置 VSCode + TypeScript,关键不是装插件,而是让 tsc(TypeScript 编译器)真正参与开发流程——类型检查、自动补全、错误实时提示都依赖它正确运行。
初始化 TypeScript 项目
在项目根目录执行:
- npm init -y 创建基础 package.json
- npm install -D typescript 安装本地 tsc(不推荐全局安装)
- npx tsc --init 生成 tsconfig.json,这是类型检查的“说明书”
生成后建议打开 tsconfig.json,确认 "strict": true 已启用——这是开启完整类型安全的开关。其他如 "noImplicitAny"、"strictNullChecks" 会随之生效。
VSCode 自动识别 TypeScript 配置
VSCode 默认支持 TS,但需确保:
- 打开的是项目根目录(含 tsconfig.json 的文件夹),不是某个子文件夹
- 右下角状态栏显示 TypeScript 版本(点击可切换,选 “Workspace version” 即本地 node_modules 中的版本)
- 如果没反应,按 Ctrl+Shift+P(Win/Linux)或 Cmd+Shift+P(Mac),输入 “TypeScript: Select TypeScript Version”,手动指定
此时 .ts 文件里的类型错误会实时标红,鼠标悬停显示类型信息,Ctrl+点击可跳转定义——这些都不是插件提供的,是 VSCode 内置 TS 语言服务在工作。
启用保存时自动编译与类型检查
不想每次改完都手动敲 npx tsc?加个脚本 + 监听:
- 在 package.json 的 scripts 中添加:
"build": "tsc" 和
"build:watch": "tsc -w" - 终端运行 npm run build:watch,tsc 会在后台监听文件变化,报错即时反馈
- 配合 VSCode 的 “Save without formatting” 或关闭自动保存(File → Auto Save 关掉),避免保存瞬间触发重复编译
注意:-w 模式只做类型检查和生成 JS,不执行代码;若需热更新或打包逻辑,再引入 ts-node 或构建工具(如 Vite)。
可选但实用的增强配置
让开发体验更顺滑的小调整:
- 安装插件 “ESLint” + “Prettier”:搭配 @typescript-eslint/parser,统一代码风格和规则
- 在 tsconfig.json 中设置 "composite": true:适合多包项目,支持增量编译和跨目录引用
- 添加 "types": ["node"](如用 Node.js API):让全局变量如 process、__dirname 有类型提示
基本上就这些。不需要复杂插件堆砌,核心是本地 tsc + 正确 tsconfig + VSCode 原生支持——类型安全从第一天写第一行 const x: string = 'hello' 就开始生效了。










