关键在于本地 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’ 就开始生效了。