如何让Visual Studio 2022监视TypeScript文件变更并配合Hot Reload自动编译？

我完全懂你在老旧MVC项目里折腾TypeScript+Hot Reload的痛苦！下面给你三个针对性的解决方案，按优先级推荐：

方案一：让Visual Studio原生支持TS文件的Hot Reload触发编译 #

这是最理想的方式，不用额外启动外部进程。你可以按以下步骤配置：

1. 开启TypeScript编译保存选项
   右键项目 → 属性 → TypeScript Build，勾选「Compile on save」，同时确认「Emit output on save」也处于开启状态。

2. 让VS监视TS文件变更
   打开项目的.csproj文件，添加以下配置，把TS文件标记为项目的内容文件，这样VS的Hot Reload会感知到它们的变化：

   <ItemGroup>
     <Content Include="Scripts/**/*.ts" />
   </ItemGroup>
   

3. 强制Hot Reload时触发TS编译
   如果上面的步骤还没生效，可以在.csproj里添加一个自定义Target，让Hot Reload动作触发时先执行TS编译：

   <Target Name="CompileTypeScriptOnHotReload" BeforeTargets="HotReload">
     <Exec Command="tsc" WorkingDirectory="$(ProjectDir)" />
   </Target>
   

   这样每次点击Hot Reload按钮，VS都会先编译TS文件，再执行热重载。

方案二：让npm run watch后台运行，不阻塞构建 #

如果你还是想用TS编译器的watch模式，可以调整.csproj里的配置，解决进程阻塞的问题：

修改你的NpmRunWatch Target，添加锁文件避免重复启动，同时让命令在后台窗口运行：

<Target Name="NpmRunWatch" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug' AND !Exists('$(SolutionDir)tsc-watch.lock')">
  <!-- 用start命令后台启动watch，/min让窗口最小化 -->
  <Exec Command="start /min "" npm run watch""" WorkingDirectory="$(ProjectDir)" />
  <!-- 创建锁文件，确保只启动一次watch进程 -->
  <Touch Files="$(SolutionDir)tsc-watch.lock" AlwaysCreate="true" />
</Target>

<!-- 清理项目时删除锁文件，下次Debug构建会重新启动watch -->
<Target Name="CleanTscWatchLock" AfterTargets="Clean">
  <Delete Files="$(SolutionDir)tsc-watch.lock" />
</Target>

这样Debug构建时只会启动一次watch进程，而且不会阻塞VS的构建流程，窗口会最小化在后台运行。

方案三：换个思路——用前端工具链单独处理热更新 #

如果项目后续还要加更多前端功能，其实可以考虑把前端部分从MVC的Razor里剥离出来，用Vite或Webpack Dev Server来处理：

• 初始化一个Vite项目，把你的TS代码放在这个项目里，配置编译产物输出到MVC项目的wwwroot或Scripts目录。
• 开发时启动Vite的dev server，它会自动监视TS文件变更并热更新前端页面，同时可以通过代理配置访问MVC的后端API。
• 后端代码的热更新依然用VS自带的Hot Reload，两者互不干扰。

这种方式虽然需要额外配置，但长期来看更灵活，也更符合现代前端开发的流程，后续维护TS代码会省心很多。

备注：内容来源于stack exchange，提问作者Scott Severance