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

Question

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:

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.
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.
Frame challenge. Am I going about this all wrong?

Dou Xu-MSFT · Accepted Answer · 2024-11-07 06:33:32Z

0

About your solution 1:

From looking at .NET and native C++ apps, i think Visual Studio's native Hot Reload primarily supports .NET and C++ projects not for typescript files. That's why you get a message stating that there are no code changes.

Based on my test, i found if you enable Hot Reload on File Save and save the typescript file after modifying changes, the VS can detect typescript file changes.

Besides, you can use external tools like nodemon and ts-node to achieve it.

nodemon

ts-node

A similar ticket attached

answered Nov 7, 2024 at 6:33

Dou Xu-MSFT

3,8951 gold badge6 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Severance · Accepted Answer · 2024-11-07 21:35:12Z

Dou Xu-MSFT linked to this question, which gave me the information to solve the problem.

The key is that the tsconfig.json file needs to have the compileOnSave root-level option set to true. Here's an example (see the first line):

{
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [ "ES2022", "DOM" ],
    "target": "ES2020",
    "module": "ES2022",
    "moduleDetection": "force",
    "noEmitOnError": true,
    "sourceMap": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "rootDir": "./Scripts/ts",
    "outDir": "./Scripts/compiled",

    // Best practices
    "strict": true,
    "alwaysStrict": true,
    "exactOptionalPropertyTypes": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": false,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": false,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noPropertyAccessFromIndexSignature": false,
    "allowUnusedLabels": false,
    "noImplicitOverride": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./Scripts/ts/**/*.ts"
  ]
}

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related