Learning Node.js & TypeScript Step by Step

As a programmer it is very usual that in our programming world we cannot stick with one type of technology or one type of language or any particular framework. Eventually we have to shift to or we can say migrate to newer things like frameworks, modules, etc. Even if we try to stick with the one technology we are working on, after some times we will considered as outdated. So apart from coding us programmers also have to be in touch and get acquainted with the newer things constantly and accept the new changes.

So today we will be discussing about such things which will definitely be widely used in upcoming years of programming. Today we will discuss about Node JS & TypeScript.

Node JS:

Now as the name says Node JS we come to know that it is a JavaScript framework like all other JavaScript frameworks. So why to use this or what is so special about this framework? This question arises every time we try to learn new and updated things. So the specialty of this JS framework is that it can run JavaScript code outside the browser.

Previously JavaScript frameworks were only limited to the browser, but here Node JS can run the JavaScript Code outside our browser. If we want to make a desktop application using JavaScript then Node JS framework is appropriate.

So now how to get this Node JS, so the steps are simple:

1) Open the link https://nodejs.org/en/

2) From there download the version of Node JS. We can download any version, there are two versions given v4.5.0 LTS & v6.4.0 Current.

3) Now after we have downloaded the Node JS we will install it and then write as JavaScript code in a note pad and save it as a JS file. We are doing this to see whether the JavaScript code runs outside the browser or not.

setTimeout(function() {
console.log('World!');
}, 2000);
console.log('Hello');
var x=0;
for(x=0;x<10;x++)
{
console.log("test " + x);
}

After writing this code we will have to open Command prompt and inside that we will have to run Node JS or what we can do is that go to our windows menu bar and in that go to the node.js folder inside which there will be node.js command prompt. We have to open that command prompt and then run the file which we want.

Now here we have to make sure that the code or the program which we have written in notepad and saved it as JS file, that JS file we have to keep it in our folder where the node.js is running. Usually the node.js is running in our C drive inside our Users folder. Here is just a Snapshot of where to keep our JS files so that we can run those files in our node.js.

This is just a sample to show where to keep our JS files.

Now open Node.js command prompt.

This is how node.js command prompt will be like.

Now here we have to just write node and then give the file name.

After that press enter and the JS code will get executed.

So by this simple demo we came to know that our JavaScript code can run outside our browser with the help of Node.js

TypeScript:

As we have learnt about some basics of Node.js we will now discuss another topic of interest that is TypeScript.

Now the first question which comes into the mind is that what is TypeScript?

As per the definition TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a typed superset of JavaScript that compiles to plain JavaScript.

Now this is the definition but still why to use it or why it is needed?

Now a C# guy knows how to apply Object Oriented programming concepts in C# but the problem comes when these Object Oriented programming concepts are to be applied in JavaScript. It doesn’t mean that we do not have Object Oriented Programming concepts in JavaScript, we do have them but they are a bit different. For example to apply Inheritance in JavaScript we have to use “Prototype” and if we want to create a class inside a class we have to use “Closures”. Due to this it becomes a bit difficult for a C# guy to code in JavaScript.

Therefore this TypeScript was introduced where it adds class based object oriented programming to the language. It means that instead of using Closures, Prototypes, etc. we can simply use keywords like class, constructor, etc. which will make it easy to apply object oriented programming concepts to our JavaScript. And it will definitely help C# guy to code in JavaScript as he is acquainted with the Class, Constructor, etc. keywords.

To use TypeScript we should have Visual Studio 2015.

We will create a new project as shown in the image above.

After that we have to select ASP.NET empty project. We also have to uncheck the Checkbox “Host in the Cloud” as this is just a simple application.

We will see our application like this. Now in that we have to first add a NPM Configuration file. NPM means Node Package Manager.

For that Right click on WebApplication and then go to Add and then go to new item.

After the package.json file is added we have to then add reference of the typescript file.

Save the file after that. The next step is that we have to right click on our project “WebApplication1” and then go to the Add option and after that select TypeScript file.

Now we will be able to see in our Solution explorer of our project there will be a “.ts” file added. We can give any name to our file. Here the name given is “Test.ts”.

In that we will write a simple code in TypeScript.

class Test {
}

We save the file after writing the code. As soon as we save the file immediately an equivalent JavaScript file is created known as “Test.js”. Here we see how a simple TypeScript code is converted into complex JavaScript code.

In the above image we see a red line which is an option in solution explorer called as “Show All files”. Click on that option and it will show all the files.

From these files we will include the file of “Test.js” in our project.

Now when we open our “Test.js” file we will see the same code but in JavaScript. By looking at the code we definitely come to know how a simple code written in TypeScript can become complex in JavaScript.

var Test = (function () {
function Test() {
    }
return Test;
}());

The output will be same for both “Test.ts” & “Test.js” files as the code is same but we know that this is simple code, when the code becomes complex where we will be using lot of Object Oriented Programming it will be very difficult for a C# guy to write the code in JavaScript.

NPM:

NPM is nothing but Node Package Manager. It gets installed when we are installing Node.js. It is like NuGet packages from where we can download any kind of frameworks or libraries which we will be using in our project. The only difference is that NuGet downloads on the specific framework or library whereas NPM downloads the framework or library along with the dependencies related to that framework or library which will be used in the project.

NPM is the default package manager for the JavaScript runtime environment Node.js.

Below is a nice 45 minutes long training video on TypeScript: -