TypeScript开发的必备工具！ tsc –watch模式完整指南

7 月 6, 2026

—

cslab

in IT Security

在使用TypeScript编写代码时，您是否每次都需要在终端中输入tsc来查看修改后的内容？

如果是这样，那么今天阅读完这篇文章后，您将进入一个全新的世界！ 😉

1. –watch 标志是什么？ 🤔

默认情况下，执行tsc命令时，TypeScript编译器会一次性扫描项目中的源文件，将其转换为JavaScript文件后退出。

但是，如果附加–watch（或简写-w）标志，情况就会不同。

持续监视: 编译器不会退出，而是保持进程运行。
文件更改检测: 实时检测项目中文件保存(Save)的瞬间。
增量编译: 只对更改的部分进行快速重新编译，以更新输出结果。

2. 为什么要使用 –watch？ ✨

使用此功能的好处是显而易见的。

提高开发速度(DX): “修改代码 -> 保存 -> 切换到终端 -> 输入tsc -> 查看结果”的重复过程中的中间步骤消失了。
实时错误反馈: 编写代码后，语法错误或类型错误会立即显示在终端中。就像一个实时拼写检查器！ ✍️
高效资源使用: 它不是从头开始重新读取所有文件，而是只处理更改的部分和相关文件，这使得它在大型项目中速度更快。

3. 如何使用？ 🛠️

使用方法非常简单。请在终端中输入以下内容：

# 当只监视一个特定文件时
tsc index.ts --watch

# 当监视整个项目时（基于tsconfig.json）
tsc --watch

执行命令后，终端会显示“Starting compilation in watch mode…”字样，监视模式随即启动。现在，每当您在编辑器（如VS Code）中修改代码并按下Ctrl + S时，编译都会自动进行。 ✅

4. 与 tsconfig.json 一起使用 ⚙️

通常，在实际项目中会使用配置文件tsconfig.json。此时，可以通过watchOptions设置进行更精细的控制。

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "watchOptions": {
    "watchFile": "useFsEvents",       // 配置文件监视方式
    "watchDirectory": "useFsEvents", // 配置目录监视方式
    "fallbackPolling": "dynamicPriority" // 系统资源不足时的轮询方式
  }
}

提示: 在大多数情况下，默认设置已经足够出色！

5. 实战技巧: 与 Nodemon 结合 🍯

tsc –watch只会生成JavaScript文件，但不会自动运行文件。此时，如果结合使用nodemon或ts-node-dev等工具，您将体验到“代码修改 -> 编译 -> 服务器重启”一次性完成的魔力。

推荐工作流程:

1. 在一个终端窗口中运行tsc –watch。

2. 在另一个终端窗口中运行nodemon来执行生成的dist/index.js。

6. 总结 🏁

–watch标志不仅仅是一个简单的选项，它是决定TypeScript开发者生产力的核心工具。如果您还没有使用过它，今天就立即在终端中添加一个-w。您的开发体验将会变得更加愉快！ 😊