安装Node.js后全局安装TypeScript,2. 项目根目录运行tsc –init生成配置文件,3. 设置tsconfig.json的编译选项并创建src和dist目录,4. VSCode自动读取配置实现实时错误提示。
要在 VSCode 中配置 TypeScript 开发环境,核心步骤包括安装 Node.js 和 TypeScript、初始化项目、配置 tsconfig.json 文件,并确保 VSCode 正确识别和提示错误。下面一步步说明如何操作。
安装 Node.js 和 TypeScript
TypeScript 需要 Node.js 环境来运行包管理器和全局安装编译器。
• 如果尚未安装 Node.js,请前往 nodejs.org 下载并安装 LTS 版本。
• 安装完成后,打开终端执行以下命令安装 TypeScript:
npm install -g typescript
• 验证是否安装成功:
tsc –version
初始化项目并配置 tsconfig.json
每个 TypeScript 项目都需要一个配置文件来定义编译选项。
• 在项目根目录打开终端,运行:
tsc –init
• 这会生成 tsconfig.json 文件,包含默认编译选项。
• 常用配置项建议:
- “target”: “ES2020” —— 编译后的 JavaScript 版本
- “module”: “commonjs” —— 模块系统
- “outDir”: “./dist” —— 编译后文件输出目录
- “rootDir”: “./src” —— 源码目录
- “strict”: true —— 启用严格类型检查
• 创建 src 目录存放 .ts 文件,编译后自动输出到 dist。
在 VSCode 中启用实时编译和错误提示
VSCode 内置对 TypeScript 的支持,但需要正确设置工作区。

查看详情

• 打开项目文件夹后,VSCode 会自动读取 tsconfig.json。
• 编辑 .ts 文件时,语法错误和类型警告会实时标红提示。
• 此命令监听 src 目录下的文件变化,自动编译到 dist。
可选:使用 package.json 管理脚本
便于团队协作和自动化构建。
• 运行 npm init -y 生成 package.json。
• 添加常用脚本:
"scripts": {
"build": "tsc",
"watch": "tsc --watch"
}
登录后复制
• 之后可通过 npm run build 或 npm run watch 执行任务。
基本上就这些。配置完成后,你就可以在 VSCode 中流畅编写、调试和编译 TypeScript 代码了。不复杂但容易忽略细节。
以上就是在VSCode中配置TypeScript开发环境的详细内容,更多请关注php中文网其它相关文章!

