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

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

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

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 };

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:

    <!-- 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>

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.

visual studio code visual studio code typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

COMO USAR e trabalhar com Code Review no Visual Studio Code

💲 Live CollabPlay: 💲 Hospedagem com Desconto Exclusivo: Não é todo programador que gosta de compartilh...

User Snippets (Code Shortcuts) in Visual Studio Code

#vscode Hello, my friends and fellow developers, this video is all about User Snippets. That means the Snippets (Code Shortcuts) that you can make for yourse...

Python в Visual Studio Code

We are pleased to announce that the July release of the Python extension is now available for Visual Studio Code. You can download the Python extension from the Marketplace, or install it directly from the extension gallery in Visual Studio Code. If you already have the Python extension installed, you can also get the latest update by restarting Visual Studio Code. You can read more about Python support in Visual Studio Code in the documentation .

C++ Development with Visual Studio Code

If you’re looking for a fast and lightweight open-source code editor, Visual Studio Code has you covered. Come for a deep dive into the features of Visual Studio Code which provide a rich, productive environment for C++ development.

The History of Visual Studio Code

We speak to the creator of Visual Studio Code about the early challenges to now becoming the most popular development environment in the world.