AngularJS 1.x开发者转TypeScript编译工作流：如何保留F5刷新模式？

兄弟，我太懂你这种依赖F5就能快速验证代码效果的爽感了——手动敲编译命令确实会把流畅的开发节奏打断得稀碎。其实TypeScript生态早就有完美的解决方案，核心就是让编译自动化，完全能复刻你之前AngularJS 1.x那种“写完就刷”的体验，甚至还能更进一步让浏览器自动刷新。

下面一步步给你说怎么弄：

1. 开启TypeScript自动监听编译 #

TypeScript CLI本身就带监听模式，根本不用每次手动敲tsc。只要在编译命令后面加个--watch（简写-w）参数就行：

tsc --watch

如果你已经有tsconfig.json配置文件，更方便——直接在配置里加"watch": true，之后只要跑tsc命令，编译器就会一直盯着你的TypeScript文件，只要你修改保存，它就自动把TS转成JS，全程后台运行，完全不用你管。

2. （可选但超爽）让浏览器自动刷新 #

要是你想连F5都省了，还能让浏览器在编译完成后自动刷新页面。给你推荐个轻量工具live-server：

• 先全局安装：npm install -g live-server
• 然后在你的项目根目录跑：live-server

它会自动打开浏览器，并且监听你的文件变化——只要TypeScript编译出了新的JS文件，浏览器立刻就会刷新，连手动按F5的步骤都省了。当然你要是习惯按F5也完全没问题，因为编译已经自动完成了，刷新出来的肯定是最新代码。

3. 把命令整合到npm脚本（不用记命令） #

为了不用每次敲长命令，你可以把这些操作写到package.json的scripts里：

{
  "scripts": {
    "dev:watch": "tsc --watch",
    "dev:serve": "live-server"
  }
}

之后开两个终端窗口（或者用终端的分屏功能）：一个跑npm run dev:watch负责自动编译，另一个跑npm run dev:serve负责自动刷新浏览器。接下来你就只管写TypeScript代码，保存后剩下的事全交给工具就行。

针对AngularJS迁移的小提示 #

因为你是从AngularJS 1.x转过来，项目结构应该还是传统的静态文件结构。只要在tsconfig.json里把outDir设成你原来存放JS文件的目录，编译后的JS就会直接覆盖原来的位置，你的HTML引用完全不用改，按F5的时候浏览器加载的就是最新编译好的JS，和之前的体验一模一样。

举个tsconfig.json的配置例子：

{
  "compilerOptions": {
    "target": "ES5", // 兼容AngularJS 1.x的运行环境
    "module": "ES5",
    "outDir": "./js", // 假设你原来的JS都放在js文件夹里
    "watch": true
  },
  "include": ["./src/**/*.ts"] // 你的TypeScript源码所在目录
}

这样一套配置下来，你完全可以继续保持“写代码→按F5看结果”的习惯，编译过程完全在后台自动完成，根本感觉不到它的存在，完美衔接你之前的工作流。

内容的提问来源于stack exchange，提问作者Daniel F