在VSCode中配置TypeScript自动编译：环境安装与监视设置详解

Ryan

发布时间：2026-10-15 | 4人浏览过

原创

TypeScript作为现代前端开发的核心语言，需要编译为JavaScript才能在浏览器中运行。本文旨在解决手动编译繁琐的问题，通过配置VSCode和TypeScript编译器，实现编写TypeScript代码时自动编译为JavaScript文件。

结果与目标

完成以下配置后，当你在VSCode中保存任意 .ts 文件时，系统会自动将其转换为对应的 .js 文件并放置在指定目录下，无需每次手动执行编译命令。

准备条件

Node.js 环境：确保已安装 Node.js，可通过终端输入 node -v 检查版本。
VSCode 编辑器：推荐安装 "TypeScript and JavaScript Language Features" 插件以获得更好的代码提示支持。
项目文件夹：新建一个空文件夹用于存放本次实验代码。

真实操作顺序

第1步：全局安装 TypeScript 编译器

目的：获取 tsc 命令行工具，用于将 TypeScript 源码转换为 JavaScript。

操作：

打开终端（Windows按 Win + R 输入 cmd；Mac/Linux 直接打开 Terminal）。
执行全局安装命令：
```
npm install -g typescript
```
验证安装是否成功，查看版本号：
```
tsc -v
```

第2步：初始化项目配置

目的：生成 tsconfig.json 配置文件，定义编译规则和输出路径。

操作：

在VSCode中打开准备好的项目文件夹。
点击菜单栏 终端 → 新终端 打开底部终端面板。
在终端中输入以下命令生成默认配置文件：
```
tsc --init
```

第3步：编辑 tsconfig.json 参数

目的：指定源代码位置及编译后的 JS 文件存放路径，避免覆盖原文件。

入口：在项目根目录找到刚生成的 tsconfig.json 文件。

动作与重要参数：

设置输出目录：找到 outDir 字段，取消注释并设置为 "./js"。这表示编译后的 JS 文件将统一存放在项目下的 js 文件夹中（若文件夹不存在会自动创建）。

"outDir": "./js",

设置源文件包含范围：确保 include 数组中包含 **/*.ts，以便编译器扫描所有 TypeScript 文件。

"include": ["src/**/*"], // 或调整为 "**/*.ts" 以包含根目录下的ts文件

可选配置：可根据个人习惯调整 strict 类型检查（设为 false 可关闭严格模式）或 target 编译目标版本。

第4步：开启自动监视模式 (Watch Mode)

目的：启动后台进程，实时监控 .ts 文件的变更并即时编译。

操作：

在VSCode顶部菜单栏选择 终端 → 运行任务...。

在下拉菜单中选择 Show All Tasks...（显示所有任务）。

在任务列表中搜索并选择 tsc: watch - tsconfig.json 选项。

注意报错情况：

如果此时终端报错提示 No inputs were found in config file，这是因为当前文件夹下还没有任何 .ts 文件，编译器找不到源文件。这是正常现象，只需继续后续步骤即可。

测试与完成判断

目的：验证自动编译功能是否生效，并确认生成的 JS 文件内容正确。

1. 编写 TypeScript 测试文件

在项目根目录新建 test.ts 文件，输入以下内容：

(() => {
    function helloWord(str:string){
        return '这是第一个ts程序：' + str
    }
    var text = 'helloword'
    console.log(helloWord(text))
})();

2. 观察编译结果

保存 test.ts 文件后，立即检查项目目录结构。你会发现在同级目录下生成了一个 js 文件夹，内部包含编译好的 test.js 文件。

3. HTML 引入与运行

新建 test.html，引用编译后的 JS 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test TS</title>
</head>
<body>
    <script src="./js/test.js"></script>
</body>
</html>

在浏览器中打开该 HTML 文件，并按 F12 打开开发者工具查看 Console 控制台。若看到输出 这是第一个ts程序：helloword，则说明 TypeScript 环境安装与自动编译配置完全成功。

简要总结

通过上述步骤，我们成功搭建了基于 Node.js 和 VSCode 的 TypeScript 开发环境。核心在于使用 npm install -g typescript 安装编译器，并通过 tsc --init 配置输出路径，最后利用 VSCode 的 tsc: watch 任务实现自动化工作流。以上就是VSCode中TypeScript环境安装并开启自动监视编译的详细内容，更多关于TypeScript配置技巧的资料请关注本站其它相关文章！