Learn TypeScript with Angular

This article is meant for the reader who is willing to work on Angular or newly started with Angular.

Why do we require TypeScript?

In this article we will learn about TypeScript next question will arise in reader's mind would be

"If I am learning Angular then why is this TypeScript coming in between?"

The answer to it is that Angular is created using TypeScript language and one of forms one of the foundation basic to work with it. So if reader is developing Angular application then TypeScript is the way to move ahead and strong recommendation from Angular team.

Angular works with JavaScript and major of the developer are not acquainted with JavaScript as many of them are working on C# and Java. Also if you want to have inheritance you need to use prototype which is not a strongly typed language and also there is no polymorphism and so on, these are some of the shortcomings of JavaScript. In order to make things working and life of developers easy TypeScript was introduced where developer will write code in TypeScript and it will convert that line of code into JavaScript when compiled.

Below is the sample code shown down below: -

Before moving ahead would like to make some clarification about the terminology used. Many of the developers call the conversion process from TypeScript to JavaScript as "compiling".

Technically if we see compiling does the work of converting from higher level languages like C#, Java or C++ to machine language or some intermediate language also known as machine language which understands 0 and 1 binary format and practically it practically cannot be read by humans.

While here we doing the conversion from one higher level language(TypeScript) to another higher-level language(JavaScript) . So TypeScript to JavaScript conversion is a process of one higher language to another higher language and this conversion term is called as transpilation or transpiling.

As here conversion is between both of these which are kind of higher level language. So the term to this process, with the appropriate word or more suited is as transpilation or "transpiling" and here terming TypeScript fits best as a "transpiler" rather than calling compiler which is imperfect.

Knowing TypeScript

TypeScript comes from Microsoft family only with the reason and intension to do the compilation of existing code to plain JavaScript. It is an open source and freely downloadable from GitHub. It is constantly being improved at GitHub by making it more powerful day by day. Implementation of TypeScript compiler is done within TypeScript and also it can be used on any of the JavaScript Host. TypeScript does the work of compilation to clean, simple yet clean JavaScript code which has ability to run on any today's existing browser with support for future within Node.js or in any of the JavaScript engine that is capable of supporting ECMAScript 3 environments or newer version(coming in future)

Below is the image screen taken from http://www.typescriptlang.org/ site which states that TypeScript is typed superset of JavaScript language and works as open source with any browser, any host and any of the Operating System (OS).

TypeScript being Types JavaScript developers has to use highly-productive development tools and follow practices like static check and refactoring of code when creating robust JavaScript applications.

Within TypeScript, Types are optional and by making use of type allows estimating a few type annotations to make a huge difference to verify static code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.

Available version of TypeScript

TypeScript started from version 1.1 and latest version available till the when this article released is version 2.4. According to one of the MSDN blog site states that TypeScript 1.1 is far better and stable from its previous version i.e. 1.0. With the release of TypeScript 1.1 which has complete new compiler core re-designed it to both perform much better and building strong foundation for supporting future language features.

After that, releasing each version with improvised feature and extensive support for newer things. Till date version which is TypeScript 2.4 and it has the following features included in it.

TypeScript Installation

As of now we are familiar with TypeScript and its theory as well next we will understand installation part of TypeScript using node.js. TypeScript being a JavaScript open source framework so the best and easy way to get it installed is by using "npm" which is available with node.js command prompt .

Please note that before you do TypeScript installation using node.js you have to pretty make sure that to download and install node.js in your local system.

If you are ready with the node.js in your system then to proceed further with TypeScript installation and for that click on Start Menu program go to and select "Node.JS command prompt" which will open command prompt of node.js. And please note that command prompt has administrative rights and it is opened under node.js environment on that type the following command. Here in the command line specify the attribute "–g" which means globally installation of TypeScript is being done i.e. it can be very easily accessed by every profile and from any of the available folder of the system on which it is being installed.

npm install –g typescript

After you are done with process of installation successfully and found no error occurs you will certainly see an image as shown down below: -

Now type the name of TypeScript file on the command prompt, here is the command which need to be typed ‘tsc "People.ts"' as shown in the image below

It will do the conversion below TypeScript file to JavaScript file.

class People{
}

Once you press enter it will create "People.js" in the same folder. And after opening the file following is the code of the output produced which shows the converted JavaScript file with name "People.js".

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

With this hope reader has also understood the practical working with TypeScript. If you wish to learn more on Angular then we strongly recommend to do start with project based. Down below is Angular project based series and one of the best way to start with: -

+91-22-66752917
+91 9967590707
questpond@questpond.com / questpond@yahoo.com