Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

Getting the right version of TypeScript in a Visual Studio ASP.NET Core Project

January 18, 2017
dotnet

I’m building an ASP.NET Core Angular 2 app. I think I’m using the latest version of TypeScript (2.1 at the moment) but I’m not sure …

If I open a command prompt and type:

tsc --version

it gives me:

Version 2.1.5

So, great, my app must be using the 2.1?

Let’s check this by writing some 2.1 code:

let person1 = { name: "bob", age: 30 };
let person2 = { address: "12 Victoria Road" };
let mergedPerson = { ...person1, ...person2 };
console.log(mergedPerson);

Visual Studio complains straight away, putting a red squiggly line under the ...‘s. If you hover over the complaints, you get a tooltip saying ”property assignment expected“.

Lets try running the app. It runs perfectly fine with mergedPerson correctly outputted to the console.

What’s going on? The visual studio compiler must be using a different version of TypeScript.

For classic ASP.NET projects, TypeScriptToolsVersion in csproj used to define the TypeScript version but that is no longer the case in ASP.NET core. In ASP.NET Core, this appears to be defined in a file called Microsoft.TypeScript.targets at C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v15.0\TypeScript:

<PropertyGroup>
    <!-- Prefer NuGet tools version -->
    <TypeScriptToolsVersion Condition="'$(TypeScriptNuGetToolsVersion)'!=''">$(TypeScriptNuGetToolsVersion)</TypeScriptToolsVersion>
    <TypeScriptToolsVersion Condition="'$(TypeScriptToolsVersion)'==''">1.8<TypeScriptToolsVersion>
    <!-- Check the default folder for the nuget version of the installer first, if that exists we should use that. -->
    <TscToolPath Condition="'$(TscToolPath)' == '' AND Exists('$(MSBuildThisFileDirectory)tsc\tsc.exe') ">$(MSBuildThisFileDirectory)tsc\</TscToolPath>
    <TscToolPath Condition="'$(TscToolPath)' == ''">$(MSBuildProgramFiles32)\Microsoft SDKs\TypeScript</TscToolPath>
    <TscToolExe Condition="'$(TscToolExe)' == ''">tsc.exe</TscToolExe>
    <TscYieldDuringToolExecution Condition="'$(TscYieldDuringToolExecution)' == ''">true</TscYieldDuringToolExecution>
</PropertyGroup>

So, this makes sense - Visual Studio appears to be using v1.8 (line 4).

Unfortunately, simply changing the 1.8 to 2.1 didn’t work for me. I looked in my C:\Program Files (x86)\Microsoft SDKs\TypeScript directory. I only had a folder for 1.8.

Visual studio was obviously missing something, so, I downloaded and installed the latest version of TypeScript for Visual Studio.

Voila! The red squiggly lines disappeared in Visual Studio, my app still ran fine and the version references in C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v15.0\TypeScript\Microsoft.TypeScript.targets has been upgraded to 2.1.

If you to learn about using React with ASP.NET Core you might find my book useful:

ASP.NET Core 5 and React

ASP.NET Core 5 and React
Find out more

Want more content like this?

Subscribe to receive notifications on new blog posts and courses

Required
© Carl Rippon
Privacy Policy