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).

Too Many React Requests, Time to Know Something About React

Why React now?

I'm speculating here. First it was Angular v1. Then it was rxjs better known as Observables that supported a stream of related events processed into serialized asynchronous steps (seems odd to put those two terms together: serialized, sequenced to async steps). Angular v1, lost favor to Angular v2+. But since Angular v2+ was so different, it seemed to lose favor to React. Then came VueJS which was a light weigh and not so hard on the eyes JavaScript reactive SPA solution. So it seems it's either React or VueJS for JS reactive programming. Of course, I'm sure, this will be different 6 months from now (March 2018).

My Travels into the World of .NET Core

Running Notes of Creating a Reactive JavaScript Application Using ASP .NET Core and Visual Studio 2017

Overview

The complicated world of Microsoft open source.

Microsoft is trying to center all the .NET platforms around a standard called: .NET Standard. The latest version is .NET Standard 2.0. If your app depend solely on namespaces from the .NET Standard, it practically guaranteed to just work on many different platforms - supposedly - provided that the platform supplies "base" class libraries written to the standard.  So same old song and dance: "write once, run many."

The .NET Core Framework is non-Microsoft, open-sourced, version of .NET which can run on non-Windows machines. Various versions of .NET Core Framework are 100% compatible with the .NET Standard. That is to say, the .NET Core Framework 2.0 platform is compliant with, "exposes all APIs defined in" or "targets" the .NET Standard 2.0 depending on how you want to think about it. At times, however, the .NET Core Framework version can be ahead of or a superset of the .NET Standard.

The .NET Core Framework 2.0 (otherwise known as the .NET Core SDK 2.0) represents really 3 major parts

1. CoreCLR - the .NET runtime
2. CoreFX - the .NET framework library 
3. dotnet.exe - the command-line tool referred to as the "application host CLI" (the part I think should be included when .NET Core Framework is represented)

The .NET Core Framework tool set: all of the above plus Visual Studio 2017 and Entity Framework Core. Visual Studio IDE may lag behind dotnet.exe CLI application as far as supported features and will always lag behind in integrating the latest stable reactive JavaScript application framework releases (but usually you can work around this).

What You Need for a JavaScript ES6 Reactive Single Page App (SPA) .NET Core Framework Webapp "Hello World"

It's OK to start with Visual Studio 2017 Community (VS2017C) so install as first step using the Visual Studio Installer (VSI), a separate product from VS2017C. Don't try to separate out what you think you need from what you don't need for the install process. Install it all even though you probably use 30% of what is installed.

Recently (March 2018), it seems one must use VSI to see if there is an available update to and acquire updates to VS2017C and all involved in developing the "Hello World" SPA webapp. There will be a button labeled "Update" under the VS2017 you have installed which normally would be labeled "Modify". Another indication that major VS2017 IDE and environment update is available is a yellow colored flag icon in the upper right corner of a running IDE. Click on the flag, a notifications window opens and, if a VS2017 update is indicated as pending, click the notification to install the update. This step may not install the .NET Core SPA project templates you need (out of the possible six supported so far: Angular, currently (March 2018) supporting version 4, React, React w/Redux, VueJS, Aurelia, Knockout where half of which are only exposed through dotnet.exe). If so, do this (while VS2017C and VSI are not running) from the command-line (CLI):

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Which command-line (CLI) you ask? Well, here are some other pieces you'll need:

1. "Open Command Line" by Mads Kristensen installed through VS2017C IDE/Tools/"Extensions and Updates"
2. Git Bash, for you UNIX command-line fans. Git, if not already install by VSI (after VS2017C installation/update step, check first if already installed with "git --version" on the command-line). If Git is not installed, download and install Git Bash that comes with Git from git-scm.com
3. NodeJS, if not already install by VSI (after VS2017C installation/update step, check first if already installed with "node -v" on the command-line) installed through download from nodejs.org. This installs "npm.exe" which is crucial.

VS2017C uses and manages three different package manager applications (more if you count VSI) to manage project dependencies:

1. NuGet - Project view: Solution Explorer/twirl open project, twirl open Dependencies/twirl open NuGet - To manage, VS2017C/Tools/NuGet Package Manager/Package Manager Console
2. npm - Project view: Solution Explorer/twirl open project, twirl open Dependencies/twirl open npm - To manage, the obvious way, open the CLI and go to project's CLI root, edit package.json and execute npm commands.
3. .NET Core 2.0/dotnet.exe  - Project view: Solution Explorer/twirl open project, twirl open Dependencies/twirl open SDK  - To manage, the obvious way, open the CLI and go to project's CLI root, execute dotnet.exe commands, start with "dotnet -h".

Create a New SPA Project (and Solution) Using a .NET Core Project Template

For Angular (4 currently), ReactJS or ReactJS and Redux:

Open VS2017C, File/New/Project/Visual C#/.NET Core/select "ASP.NET Core Web Application", select/create project folder, name project and click OK. At this point, "New ASP.NET Core Web Application" dialog box pops up where you can select one of the following three project templates: Angular, React.js or React.js and Redux.

For VueJS, Knockout or Aurelia Web Application project template, create and cd into a project's CLI root folder and from the CLI, type:

dotnet new [vue | knockout | aurelia]

Blast Off with  "Hello World"

Open VS2017C, File/Open/"Project/Solution..."/, browse to project folder, select either the project *.csproj file or solution *.sln file and click Open.

Let the IDE pull in what it thinks it needs, find the play button (green triangle), select "IIS Express" (installed by VSI) and click the play button. Edge browser should launch and display JS SPA reactive webapp per the selected project template.

HTML, CSS, Razor, Server Controller and View and JavaScript SPA Source Files

JavaScript and CSS source: VS2017 IDE/Solution Explorer/twirl open ClientApp folder, twirl open Components folder. App is the main component, all other folders are components that are partial views that make up small to large chunk of a webpage.

Server Action source: VS2017 IDE/Solution Explorer/twirl open Controller folder. Take action requests from the browser, providing access to data model and return views as ActionResult

HTML, web dependencies, Razor source: VS2017 IDE/Solution Explorer/twirl open Views folder. Specification of how HTML, CSS, JavaScript, dependencies, data or resources are packaged for return trip to the browser. Under the Views folder you make find a folder name "Shared." Under this folder Razor/HTML templates exist to provided common full or partial page templates.

Data provision: The project template doesn't create a Models folder, the M of the MVC design pattern, probably because not every MVC webapp needs a database therefore no model is needed nor is every MVC application complex enough to warrant the separation of concerns of strongly typed models from a controller or controller method.  When strongly typed models are warranted, plain-old class objects backing, or POCOs, source are usually directly located under the Models folder where any controller or the Razor renderer can find them. The POCOs, with C# properties that somewhat match the attributes or columns of a DB table, mirror or model a DB table.

Deleting, Repairing and Restoring IDE and Project Dependencies

Sometimes dependencies, whether npm, NuGet, .NET Core, and VS2017C, become corrupted. The best thing to do is delete the dependencies and then restore them. Do all steps below in order or just the affected dependency set:

1. For VS2017C dependencies, close all VS2017C solutions and instances, fire off VSI and under the active IDE, click "More" and select "Repair." After the repair completes, open the solution, click "Build/Clean Solution". VSI can be fired off from VS2017C, from the Tools menu item, click "Get Tools and Features...".
2. For updating or updating and reinstalling a solution's NuGet dependencies, Microsoft once again provides many confusing ways to do the same thing. I think the simplest method is open the solution in the VS2017 IDE then goto Tools/Nuget Package Manager/Package Manager Console. In the Package Manager Console, to update only, type "Update-Package." To update and reinstall all dependency packages, type "Update-Package -reinstall". BTW, VS2017 IDE won't tell you when some of solution's NuGet dependency packages have updates. To check for NuGet dependency package updates, open the solution in the VS2017 IDE then goto Tools/Nuget Package Manager/"Manage NuGet Packages for Solution..." and click the "Updates" tab for listed available updates.
3. For .NET Core SDK dependencies, from the root folder of project and from the CLI, type "dotnet restore"
4. For npm dependencies, delete the node_modules folder in the root of the project folder and from the CLI, type "npm install"
5. To do a clean VS2017C build and run, open the solution, click "Build/Rebuild Solution" followed by selecting "IIS Express" (to the right of the play button, the green triangle) and then clicking the play button.

Clear as mud.