Getting Started With TypeScript - Part One

Microsoft Introduced TypeScript in 2012. As per the official website of TypeScript,

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source”

 

That means TypeScript has all the features of JavaScript and we can use it for any browser, any host, and any OS because at the end it will convert all the TypeScript code into JavaScript code. And the main important and best thing is that it is open source. The TypeScript Compiler is itself written in TypeScript and transcompiled to JavaScript.

TypeScript  - a typed superset of JavaScript

Nowadays, JavaScript is very popular for developing the web applications because we are writing a lot of code in the client side application or we can say in JavaScript, which makes our website faster. So, the first question that crosses our mind is why we use TypeScript when JavaScript is already there and when TypeScript is also converting the code into JavaScript.

Why TypeScript?

TypeScript makes it easier to organize our code and it supports Object Oriented programming, like C#, Java, etc. We can use class, namespace, inheritance, etc., so it is very helpful when we are going for very large application and we are handling most of the things in UI side.

TypeScript will check all types of errors at the time of compilation only, so we don’t need to wait for runtime check.

TypeScript also supports other JS libraries.

We can write same code of JavaScript in TypeScript as well.

The most popular framework, Angular, also uses TypeScript.

As per the TypeScript official website, Brad Green, Engineering Director of AngularJS said the below comment about TypeScript.

“We love TypeScript for many things… With TypeScript, several of our team members have said things like 'I now actually understand most of our own code!' because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks.”

— Brad Green, Engineering Director - AngularJS

Below are some more comments from others.

“One of Ionic's main goals is to make app development as quick and easy as possible, and the tooling support TypeScript gives us with autocompletion, type checking and source documentation really aligns with that.”

— Tim Lancina, Tooling Developer – Ionic

“TypeScript helped us to reuse the team’s knowledge and to keep the same team velocity by providing the same excellent developer experience as C# ... A huge improvement over plain JavaScript.”

— Valio Stoychev, PM Lead - NativeScript

“TypeScript has helped ensure that Dojo 2 will be built on rock solid foundations, which will make enterprise development better. TypeScript gives us all the benefits of ES6, plus more productivity, … and responsive support from the TypeScript team.”

— Dylan Schiemann, Co-founder - Dojo Toolkit, CEO – SitePen

“TypeScript is a smart choice when writing a modern web- or JavaScript-based application. TypeScript’s carefully considered language features and functionality, and its consistently improving tools, result in a terrifically productive development experience.”

— Aaron Cornelius, Research Fellow - Epic

After knowing this many facts about TypeScript, how you are feeling, it’s good, isn't it?

Now, it is time to write code in TypeScript, but before that, we have to install TS in our system. If we are using Visual Studio 2015 Update 3 or Visual Studio 2017, then we don’t have to worry about the installation of TypeScript. It includes TypeScript by default but this is not necessary to use Visual Studio or any other particular IDE for using TypeScript. We can use any editor or even notepad also to use TypeScript.

If we are using a different platform or we don't want to use Visual Studio, then we have to use any text editor and the TypeScript npm package to use TypeScript. We can go for Node.js, WebStorm, Atom, SubLime Text, Eclipse, etc. as a tect editor. 

Here, we are going through the Node.js and notepad to see how to use TypeScript.

Installing Node.js

First of all, we have to download Node.js and install it in our system. Please click here to install the Node.js and we can download the Node.js source code or a pre-built installer as per our platform.

Here, we are going to download Windows Installer (.msi) as per my OS. After installing the file, run the installer as described below.

Step 1

Double click on the file (node-v6.11.0-x64.msi).

Step 2

Click Next.



Step 3

After reading the License Agreement, check the checkbox of "I accept the terms in the License Agreement" and click Next.



Step 4

We will get the folder location where we want to install it. We are leaving it intact. Click Next



Step 5

Click Next.



Step 6

Click "Install" button to install Node.js.



Step 7

Click Finish.



Yes, we are done with the installation of Node.js. Now, let's install TypeScript.

Installing TypeScript

First of all, open Node.js command prompt from the Start menu.



Type the below command in command prompt.

npm install -g typescript



We have installed TypeScript successfully.

Now, right click on the screen and click New -> Text Document and create the txt file. Give it a desired name and change the extension as .ts, as shown in the below image.


Open and edit this file in Notepad. We are going to write the below code in our first.ts TypeScript file.

alert("My First TypeScript Program");



Now, save the file.

Compilation of TypeScript

Open the Node.js command prompt from the Start menu and go to the file location using command line and write the following command.

tsc first.ts 

Now, we can clearly see that first.js file is created in the same location and we can use this JavaScript file for our use.


Summary

In this article, we have covered the introduction of TypeScript, why we need TypeScript, its installation, and its compilation process with Node.js.