首先安装Node.js和npm，然后在项目中本地安装TypeScript并初始化tsconfig.json，接着在VSCode中启用工作区版本的TypeScript支持，安装ESLint、Prettier等扩展，并配置自动编译脚本，最终实现智能提示、语法检查与实时编译的完整开发环境。
要在 VSCode 中配置完整的 TypeScript 开发工具链，关键在于正确安装和集成核心工具，确保编辑器能提供智能提示、语法检查、自动编译和错误提示等功能。以下是具体步骤。
安装 Node.js 与 npm
TypeScript 工具链依赖 Node.js 环境运行。请先确认已安装 Node.js 和 npm（Node 包管理器）：
- 访问 https://www.php.cn/link/5b18e1a3e2092783aea4b1aa4a894d8a 下载并安装 LTS 版本
- 安装完成后，在终端执行以下命令验证：
npm -v
应显示版本号，表示安装成功。
全局或本地安装 TypeScript
TypeScript 编译器（tsc）是将 .ts 文件转为 JavaScript 的核心工具。
- 推荐在项目中本地安装，避免版本冲突：
- 也可全局安装用于快速使用：
- 验证安装：
初始化 tsconfig.json 配置文件
tsconfig.json 是 TypeScript 项目的配置核心，定义编译选项。
- 在项目根目录运行：
- 生成的文件包含大量注释选项。常用配置示例：
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"]
}
该配置指定源码目录、输出目录、语言目标等。
启用 VSCode 内置 TypeScript 支持
VSCode 内置 TypeScript 支持，默认启用。确保它使用项目本地版本：
MediPro网上书店系统
下载
基于PHP+MYSQL开发，除了网上书店必备的商品管理、配送支付管理、订单管理、会员分组、会员管理、查询统计和多项商品促销功能，还具有完整的文章、图文、下载、单页、广告发布等网站内容管理功能。系统具有静态HTML生成、UTF-8多语言支持、可视化模版引擎等技术特点，支持多频道调用不同模版和任意设置频道首页，适合建立各种规模的网上书店。系统具有以下主要功能模块： 网站参数设置 - 对网站的一些参数进
- 打开任意 .ts 文件
- 点击右下角显示的 TypeScript 版本号
- 选择 “Use Workspace Version” 指向本地安装的 tsc
这样可保证编辑器与构建行为一致。
安装推荐扩展提升开发体验
以下扩展可显著增强 TypeScript 开发效率：
- ESLint：代码质量检查，支持 TS
- Prettier：代码格式化，可与 ESLint 集成
- Path Intellisense：路径自动补全
- Import Cost：显示导入模块的大小
安装后按需配置，例如创建 .eslintrc.cjs 文件启用对 TypeScript 的 linting。
配置自动编译（可选）
开启保存时自动编译，提高反馈速度。
- 在 package.json 中添加脚本：
"build": "tsc",
"watch": "tsc --watch"
}
- 终端运行：
修改 .ts 文件后会自动生成对应 .js 文件。
基本上就这些。配置完成后，VSCode 能提供类型检查、重构支持、跳转定义、实时错误提示等完整功能，形成高效 TypeScript 开发环境。
