VSCode 中 TypeScript 环境配置与运行指南

在开始学习 TypeScript 之前，首先需要完成环境的基础搭建。

一、安装 TypeScript 编译器

npm install -g typescript 
//检查是否安装
tsc -v

二、生成项目配置文件。进入目标文件夹，在终端执行初始化命令以生成必要的配置。

tsc --init

执行完毕后，检查当前目录，确认是否成功生成 tsconfig.json 配置文件。

三、编译 TypeScript 文件

方法一：使用命令行直接进行编译操作。

例如，新建一个 test.ts 文件，在终端输入 tsc 命令后跟文件名（如 tsc test.ts）即可执行编译。

tsc test.ts

上述手动编译方式较为繁琐，接下来介绍一种更高效的自动化方案。

方法二：在 VSCode 中配置 TypeScript 自动编译。

由于浏览器无法直接解析 TypeScript 代码，编译的核心过程是将 .ts 文件转换为浏览器可识别的 .js 文件。

具体配置步骤如下。

前两步操作如前文所述，完成环境初始化与配置生成。

第三步，点击 VSCode 菜单栏中的“终端”，选择“运行生成任务”，并选择 TypeScript 的 tsconfig.json 进行编译配置。

观察终端输出效果，此时新建一个 demo.ts 文件，终端会自动监视文件变化并触发编译。

编译完成后，会在指定的 js 文件夹中自动生成对应的 demo.js 文件。

对比源文件与生成的 JS 文件，确认编译结果符合预期。

注意：在第三步配置任务时，还有更简便的操作方式。可以直接在终端执行 tsc -w 命令，这将启用监视模式，自动编译当前目录下所有 TypeScript 文件。

如何在终端直接运行 TypeScript 代码并查看输出？

第一步，在 VSCode 扩展商店中安装 Code Runner 插件。

第二步，全局安装 TypeScript 相关依赖包，包括 ts-node 和类型定义。

npm i typescript ts-node @types/node@* -g

第三步，点击文件编辑区右上角的运行按钮，即可直接执行代码。

完成上述配置后，即可顺利开启 TypeScript 的学习与开发之旅。

总结

本文介绍了在 VSCode 中使用和运行 TypeScript 的完整流程。如需了解更多相关内容，建议查阅本站往期文章或继续浏览后续教程，感谢支持。