tsc-watch完全指南：TypeScript开发的终极热重载工具

tsc-watch完全指南：TypeScript开发的终极热重载工具

【免费下载链接】tsc-watchThe TypeScript compiler with --watch and a new onSuccess argument项目地址: https://gitcode.com/gh_mirrors/ts/tsc-watch

tsc-watch是一款为TypeScript开发者打造的终极热重载工具，它在TypeScript编译器（tsc）的基础上增加了--watch参数支持，并提供了对编译状态的实时响应能力。通过tsc-watch，开发者可以轻松实现代码修改后的自动编译与后续操作触发，极大提升开发效率。

为什么选择tsc-watch？

TypeScript作为强类型语言，编译过程是开发流程中不可或缺的一环。传统的tsc --watch虽然能监听文件变化并自动编译，但缺乏对编译结果的灵活响应机制。tsc-watch完美解决了这一痛点，它不仅保留了tsc的所有功能，还新增了一系列实用的钩子命令，让开发者可以在编译成功、失败或开始时执行自定义操作。

tsc-watch的核心优势

• 完全兼容tsc：任何可以用tsc完成的工作，tsc-watch都能胜任，唯一的区别是它能对编译状态做出反应。
• 灵活的钩子命令：提供多种钩子参数，满足不同场景下的需求。
• 使用本地编译器：tsc-watch会优先使用项目中安装的TypeScript编译器，如果全局安装了tsc-watch，它会先查找本地编译器，不存在时才使用全局tsc。

快速安装tsc-watch

项目本地安装

对于项目级别的使用，推荐将tsc-watch安装为开发依赖：

npm install tsc-watch --save-dev

全局安装

如果需要在命令行中全局使用tsc-watch，可以执行：

npm install -g typescript tsc-watch

强大的钩子命令详解

tsc-watch提供了丰富的钩子命令，让你可以在编译的不同阶段执行自定义操作。

--onSuccess：编译成功时执行

每次编译成功后执行指定命令。例如，编译成功后自动启动服务器：

tsc-watch --onSuccess "node ./dist/server.js"

在package.json中配置：

"dev-server": "tsc-watch --noClear -p ./src/tsconfig.json --onSuccess \"node ./dist/server.js\""

--onFirstSuccess：首次编译成功时执行

仅在第一次编译成功时执行命令，该进程不会被后续编译终止，只有当tsc-watch被终止时才会停止。

--onFailure：编译失败时执行

当编译失败时执行指定命令，例如输出提示信息：

tsc-watch --onFailure "echo Beep! Compilation Failed"

--onCompilationStarted：编译开始时执行

在每次编译开始时（包括初始编译和增量编译）执行命令。

--onCompilationComplete：编译完成时执行

无论编译成功或失败，在每次编译完成时执行命令。

--onEmit：文件输出时执行

在每次文件输出时执行命令，会忽略未变化的文件，且不考虑编译成功或失败。默认有300ms的防抖延迟，可以通过--onEmitDebounceMs参数自定义延迟时间。

实用示例

基本用法

监听server.ts文件，编译输出到dist目录，成功后运行服务器：

tsc-watch server.ts --outDir ./dist --onSuccess "node ./dist/server.js"

使用自定义编译器

如果需要使用特定的TypeScript编译器，可以通过--compiler参数指定：

tsc-watch --onSuccess "node ./dist/server.js" --compiler my-typescript/bin/tsc

在package.json中配置

在项目的package.json中配置开发脚本，是最常见的使用方式：

"dev": "tsc-watch -b ./src/tsconfig.json --onSuccess \"yarn start-dev-server\""

使用tsgo进行原生编译

tsc-watch支持tsgo（原生编译），只需提供编译命令：

"dev": "tsc-watch --compileCommand tsgo"

其他实用参数

--noColors

默认情况下，tsc-watch会为输出添加颜色（成功为绿色，失败为红色）。使用--noColors参数可以禁用颜色输出。

--noClear

禁止在编译开始时清除控制台。

--silent

静默模式，减少输出信息。

--maxNodeMem

手动设置Node.js的内存分配，例如--maxNodeMem 1024。

总结

tsc-watch作为TypeScript开发的终极热重载工具，通过提供丰富的钩子命令和灵活的配置选项，极大地提升了TypeScript项目的开发效率。无论是小型项目还是大型应用，tsc-watch都能成为你开发流程中的得力助手，让你专注于代码编写，而不必频繁手动执行编译和运行命令。

开始使用tsc-watch，体验TypeScript开发的无缝流程吧！

【免费下载链接】tsc-watchThe TypeScript compiler with --watch and a new onSuccess argument项目地址: https://gitcode.com/gh_mirrors/ts/tsc-watch