VS Code 与 TypeScript 集成

VS Code 内置 TypeScript 语言服务，开箱即用，下面梳理核心功能。

实时类型检查

VS Code 会在编辑时自动进行类型检查，错误与警告直接显示在代码下方：

let name: string = 123;  // 红色波浪线：类型不兼容

无需额外配置，保存文件即可在"问题"面板（Ctrl+Shift+M）查看所有类型错误。

智能提示与自动补全

输入时自动显示类型提示：

interface User {
  name: string;
  age: number;
}

const user: User = {
  // 输入 name: 自动提示类型为 string
  // 输入 age: 自动提示类型为 number
};

悬停在变量上可查看完整类型信息。

代码导航

代码重构

重命名符号

选中变量后按 F2，所有引用同步更新：

// 将 userName 重命名为 username，所有引用自动更新
let userName: string = "admin";
console.log(userName);

提取函数/变量

选中代码块后点击灯泡图标（Ctrl+.），可提取为函数或常量。

使用项目 TypeScript 版本

VS Code 默认使用自带 TypeScript 版本，若要使用项目本地版本：

1. 打开命令面板（Ctrl+Shift+P）
2. 输入 TypeScript: Select TypeScript Version
3. 选择 Use Workspace Version

注意：确保项目已安装 typescript 依赖（npm install typescript --save-dev）。

常用设置

在 .vscode/settings.json 中配置：

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always"
}

要点总结

• VS Code 内置 TS 语言服务，实时类型检查开箱即用
• F12 跳转定义、F2 重命名符号是高频操作
• 项目推荐使用本地 TypeScript 版本保证编译一致性
• .vscode/settings.json 可定制导入路径与自动行为