← back to the blog


TypeScript and NodeJS for the C# MVC Developer - Part 1

Posted on February 4th, 2017 in c#, .net, typescript, node.js by Simon

Last year, after the recanting of DNX by the folks at Microsoft, I had finally had enough with the stagnation of the .NET world. The question I was struggling with was "Is this worth the money and complexity needed to run it?" which coincidentally was one of the main benefits DNX promised to deliver before it was canned.

In its place we are left with more of the same. The Microsoft Partner network is filled with tools to build, analyse and deploy your code, and the vast majority of these tools would have been rendered obsolete by DNX where you would just xcopy and run your source code directly with one command.

So to answer my own question, I had to try some alternatives and decided a different enough alternative for web development was going to be node.js. My earlier dalliances with the technology in its infancy were positive but I really missed the type system that javascript doesn't have, so I thought I'd give TypeScript on NodeJS a go.

So where are the parallels? I'll try and explain all of this from a C# perspective.

Let's start with the IDE.

Visual Studio Replacement: VS Code/Atom.io

Oh no! Where has my safe Visual Studio IDE gone???

OK...

Take a deep breath, to ease the transition here is Visual Studio Code (or if you're feeling really adventurous here is Atom.io). Visual Studio Code is forked from Atom.io, so both IDEs are very similar.

Both IDEs will work on Windows, Linux and OSX, so feel free to choose your favourite Operating System.

Visual Studio Code

Visual Studio Code

The editing experience in Visual Studio Code will feel familiar to anyone who is used to Visual Studio, however you will find throughout this experience that you use the terminal more often in NodeJS than in C#.

Getting Acquainted with VS Code

On the left you will see the main tabs available covering:

  • Solution Explorer
  • Solution Search
  • Git Integration
  • Debug
  • IDE Extensions

Important to note, the IDE Extensions available here are not the same a those within the full Visual Studio, so sorry Resharper is not available on these lightweight IDEs.

We can however bind shortcuts to commands from the Preferences menu:

Keyboard Shortcuts Menu

To bind Rename and Format Document to what they would be in Visual Studio with Resharper for instance, we could have the following keybindings:

[
    { "key": "cmd+r cmd+r",       "command": "editor.action.rename",
                                     "when": "editorTextFocus" },
    { "key": "cmd+k cmd+d",       "command": "editor.action.formatDocument",
                                     "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly" }
]

One other helpful element of the IDE to note is the inbuilt terminal pane:

Visual Studio Code Inbuilt Terminal

This will be useful when working with NodeJS and NPM later in this series.

Next up in Part 2, our target software architecture.