TypeScript version mismatch in Visual Studio 2022

Question

With a web project set to use 4.4 explicitly via the Projet Properties, TypeScript Build: Note that it says "unavailable".

I get this warning when opening the project with VS2022: PROJECT.X specifies TypeScript version 4.4, but a matching compiler was not found. Would you like us to update your project to use TypeScript 4.3?

If I change the TypeScript version to "Use latest available":

On loading, the warning becomes: PROJECT.X is built using TypeScript 4.3, but the TypeScript language service version currently in use by Visual Studio is 4.4. This may be caused by other projects in the solution using a different version of TypeScript. Would you like us to update your project to use TypeScript 4.4?

So these seem to say VS has a 4.4 language service, but not the matching compiler?

I have read:

• https://learn.microsoft.com/en-us/visualstudio/javascript/javascript-in-visual-studio?view=vs-2019 which explains the usage of TypeScript NuGet, npm or SDK. I use the npm method. I don't have the Microsoft.Typescript.MSBuild package installed, and I have no Typescript SDK installed in Windows.
• https://github.com/Microsoft/TypeScript/issues/21569#issuecomment-362748498 which explains the difference between the Language Service and the build Tools, dated 2018, not sure it's relevant in VS 2022. Interestingly, it also says the "version picker is only applicable if you are using the global installed version of the SDK, if you are using Nuget to build, then it is only used for picking the language service." This issue shows "(unavailable)" in the version dropdown, like me.
• project specifies TypeScript version 2.8, but a matching compiler was not found which has a similar compiler missing warning.
• TypeScript version mismatch in Visual Studio 2019 which is identical to me, but for VS2019. One solution is via the NuGet package, and the accepted solution mentions moving $(PATH) to the top of the list in Options, Projects and Solutions, Web Package Management, External Web Tools.

How do I get rid of these warnings?

Answer 1

A solution I found and hope it's working for you.

First, run Visual Studio installer and click "Modify" on your version (sorry the screenshot is in french but it should be the same):

Then go to the tab "individual components" and check "TypeScript 4.4 SDK Kit":

After doing that, the TypeScript version 4.4 became available on the Project Properties page.

However, the latest TypeScript version (4.5.x) doesn't seem to be available with that method.

Answer 2

As hinted in https://stackoverflow.com/a/56681453/1948625, one solution is to move $(PATH) higher up the list in Options, Projects and Solutions, Web Package Management, External Web Tools.

However, I think there's a bit more to it. The default is this:

With that, I get the warnings above (one of them, depending the TypeScript Version 4.4 or Latest, on the web project properties).

If I uncheck or remove $(VSInstalledExternalTools) (rather than move PATH to the top), the warnings go away.

Having removed $(VSInstalledExternalTools), I now add a fake $(SomethingRandom) at the top of the list, the warnings come back.

As I posted here https://stackoverflow.com/a/71125529/1948625 I cannot find the value of $(VSInstalledExternalTools). This makes me think it's undefined, just like $(SomethingRandom). I think there's possibly a bug here where locations of external tools doesn't cascade down the list as expected, maybe crashes out if one of the paths is invalid or blank.

I still prefer to use the version of the current project, so I prefer .\node_modules\.bin at the top of the list, rather that $(PATH). This is my solution to get rid of the warnings:

Answer 3

To find all your TypeScript compilers versions, try running this powershell:

Get-Childitem –Path C:\,D:\ -Recurse -Force -Include tsc.cmd -ErrorAction SilentlyContinue | foreach { $_.FullName; & $_ -v }

this would help in reconciling the order of the locations above, whether these folders are in your Path variable, etc.

My output is something like this:

C:\Users\BobSMith\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\.bin\tsc.cmd
Version 4.1.6
C:\Users\BobSMith\AppData\Roaming\npm\tsc.cmd
Version 4.5.5
D:\$RECYCLE.BIN\S-1-12-1-732868070-XXX-XXX-XXX\$RH58AY6.1\src\XXX\XXX.Web\node_modules\.bin\tsc.cmd
Version 3.8.3
D:\code\XXX\XXX.Web\node_modules\.bin\tsc.cmd
Version 3.4.5
D:\code\YYY\YYY.Web\node_modules\.bin\tsc.cmd
Version 4.4.2
D:\code\XXX\ZZZ\node_modules\.bin\tsc.cmd
Version 4.2.4