A little about TypeScript and Visual Studio 2017 Support

Go Crazy with ES6 JavaScript using TypeScript, But Wait...

Visual Studio 2017 (VS2017) IDE is supposed to just work when it sees TypeScript file added to a project. In that when such a TypeScript file, a source file with the file extension of *.ts, is saved, the TypeScript transpiler, tsc.exe, is executed using the file as input and ES6 compatible JavaScript source is generated and a *.js file is outputted to the same folder as the *.ts source file. But wait, this doesn't happen out of the box. I'm not sure why.

The first time user must first go to the website TypeScriptLang.org, click the Download tab, find and click the Visual Studio 2017 link. This takes you to a Microsoft.com webpage that reveals a download link for "TypeScript SDK for Visual Studio 2017." After the download is completes, and the VS2017 project is closed and reopen, viola, transpiled ES6 compatible JavaScript files sourced from the TypeScript source files. Not so fast...

What's a little madding after it's installed through VS2017, you're not sure where the transpiler is installed and what version was installed. I happened to know I downloaded 2.8.3 which will be soon forgotten and outdated. But where was it install to and what version is currently being used despite that? Was it installed as a NuGet package, a npm package, or apart of the Visual Studio Installer (VSI) environment? VSI lists older versions of the TypeScript SDK as installed and not the new version just downloaded and installed. That can't be good.

As it turns out, tsc.exe is not installed through node (so a tsconfig.json file won't work) or NuGet (so updating - deleting and then installing - to the latest NuGet package won't work; although I didn't try this).

So I scanned the filesystem and read a little online - the brute force way.

The TypeScript transpiler is installed here by VSI and when you use the Microsoft link presented by the TypeScriptLang.org download webpage:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\[container folders for different versions, e.g "2.6"]\

For VS2017 projects that have actual project files, e.g. *.csproj files and when not using Node and webpack, gulp, or grunt to install and build using TypeScript, go here (first make sure your IDE updated to the latest version) :

https://github.com/Microsoft/TypeScript/wiki/Updating-TypeScript-in-Visual-Studio-2017

For those projects that don't have actual project files, e.g. empty ASP.NET website projects and when not using Node and webpack, gulp, or grunt to install and build using TypeScript, edit this file with the latest installed TypeScript version:

C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\Tools\vsdevcmd\ext\typescript.bat 

For example, I changed "2.6" to "2.8" in the following section of text: 

...
if exist "%ProgramFiles%\Microsoft SDKs\TypeScript\2.8" (
set "PATH=%ProgramFiles%\Microsoft SDKs\TypeScript\2.8;%PATH%"
set _TypeScript_Found=1
)
if exist "%ProgramFiles(x86)%\Microsoft SDKs\TypeScript\2.8" (
set "PATH=%ProgramFiles(x86)%\Microsoft SDKs\TypeScript\2.8;%PATH%"
set _TypeScript_Found=1
)
...

The way this .bat configuration file is associated with the VS2017 dev environment is through scripts that setup environment variables. Just look at CMD shell shortcuts, specific to VS2017, that are found in the Start menu under the VS2017 folder and located here:

C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio 2017\Visual Studio Tools\

and here:

C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio 2017\Visual Studio Tools\VC\

Finally, when using Node and webpack, gulp, or grunt to install and build using TypeScript, open the project folder's package.json file and edit the TypeScript entry to something like this:

"typescript": "^2.8.3",

Followed by a "npm install" from the command-line.

Incidentally, when you install node modules globally, "npm install -g [some module/package]", on Windows 10, the binaries are install here:

C:\Users\[your user account name]\AppData\Roaming\npm\node_modules

Clear as mud.

Annoying TypeScript error that may appear after one upgrades to TypeScript 2.6 and beyond

If you see these TypeScript errors after transpiling the VS2017 stock Vue.js template project that is released with ASP .NET Core 2 for VS2017 (see "My Travels into the World of .NET Core" blog entry):

Error TS2345 (TS) Argument of type 'typeof FetchDataComponent' is not assignable to parameter of type 'VueClass'.
  Type 'typeof FetchDataComponent' is not assignable to type 'new () => Vue'.
    Type 'FetchDataComponent' is not assignable to type 'Vue'.
      ...
  C:\Users\Luckyjohn\Desktop\[project folder]\ClientApp\components\fetchdata\fetchdata.ts

Error TS2345 (TS) Argument of type 'typeof CounterComponent' is not assignable to parameter of type 'VueClass'.
  Type 'typeof CounterComponent' is not assignable to type 'new () => Vue'.
    Type 'CounterComponent' is not assignable to type 'Vue'.
      ...
  C:\Users\Luckyjohn\Desktop\[project folder]\ClientApp\components\counter\counter.ts

These can be solved by going here. The explanation of the new feature that causes this error since TypeScript 2.6 absolutely makes no sense to me (and I'm not a dumb guy, well, maybe a little slow).