Visual Studio Code – How can I make Visual Studio watch my Typescript files for changes?

I’m working on a legacy, rather outdated MVC project, where I’ve been tasked with adding several major new features. Although most of the UI is in Razor, one of the features will involve a fair bit of Javascript. To make my life easier, I decided to write Typescript instead.

Making Visual Studio 2022 transpile the Typescript to Javascript was straightforward and works normally when building the project. The problem is that I also want to rebuild the Typescript code when running Hot Reload.

If I make a change to a Typescript file and click Hot Reload, I get a message stating that there are no code changes. Since this is clearly false, it leads me to believe that Visual Studio isn’t watching my Typescript files for changes.

After being unable to find any information on how to make VS do what I want, I came across a suggestion to instead run tsc --watch and have the Typescript compiler do the watching instead. It’s a bit ugly and really isn’t the right approach, but if I could get it to work I would accept it and move on. Alas, when building I haven’t found a way to run a background process.

I’ve now got the following in my .csproj file:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<!-- other stuff here -->
 <!--
Taken from https://www.meziantou.net/running-npm-tasks-when-building-a-dotnet-project.htm
-->
 <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
   <Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
   <Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
   <!-- Write the stamp file, so incremental builds work -->
   <Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
 </Target>
 <!--
     2. Run npm run build before building the .NET project.
     MSBuild runs NpmInstall before this task because of the DependsOnTargets attribute.
  -->
 <Target Name="NpmRunBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild">
   <Exec Command="npm run build" />
 </Target>
 <Target Name="NpmRunWatch" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
   <Exec Command="start npm run watch" />
 </Target>

NpmRunWatch is supposed to run the Typescript watch process. However, despite trying many different variants of the code above, I haven’t been able to get it to run in the background. Instead, the build system waits for the watch process to exit before continuing, which defeats the purpose.

So, I’m looking for one of the following solutions:

1. Configure Visual Studio to watch my Typescript source files for changes and rebuild when I click the Hot Reload button. I would also accept a rebuild when any file that’s included in the project changes, or even an unconditional rebuild based solely on the activation of the Hot Reload button.

2. A way to make my npm run watch kludge work such that the watch process runs in the background without interfering with the rest of the build.

3. Frame challenge. Am I going about this all wrong?