Typescript – Basics of Typescript.

Introduction:

As we know almost web applications are using java script to build client side real time applications. Then what is this Typescript and why we need to learn. Yes!, the type script is not new framework, it’s super set  of java script which has extra features and code maintainability than java script. Example type script supports for strong typing as like C#.  We will explore other features this article.

Basic requirements:

To understand Typescript, one should know basics of JavaScript and as Typescript has object oriented concept, so one should know basics of Object Oriented Programming (OOP).

In this article, we will explore few features and advantages of the Typescript over JavaScript. For your information.

Advantages of Typescript:

     1. Object oriented features :  Typescript supports for OOP concepts which we not seen in JavaScript.

    2. Strong Typing:  As like other languages like C#, Java etc, Type script supports for strong typing which makes sure that application never breaks in future due to miss match of types but same feature was not there in JavaScript. Where we use only Var keyword to declare all types.

3. Error detection: Because of strong typing in Typescript, it gives a compile time error check, which saves lot of time for developers and same thing was not there in JavaScript due to lack of strong typing.

4. Code maintainability:  Using Typescript we can clearly maintain the code structure and we can avoid code smell as application grows.

Rendering Typescript on browsers: 

Typescript not directly renders on browsers, it intern returns equivalent JavaScript code to browsers. This conversion from Typescript code to JavaScript will handled by Typescript compiler (TSC), which generates equivalent JavaScript code in .js file. This process called as Transpile.

Installing Typescript :

Step 1: To install Typescript you should install npm in your machine, you can do the same using this link https://www.npmjs.com/package/npm-install

Step 2: After step 1 , we need to run one command in command prompt  to install Typescript globally as shown in image-1 below.

                                               Image – 1 : Install Typescript globally.

After installing this,  you can see version of Typescript, now you can ready to code in Typescript language.

First Typescript program: 

Now open command prompt and type the same shown in image-2 to create your first Typescript program. Here many editors can use to code the same. I’m using Visual Studio Code (VS code) , you can download the same from here https://code.visualstudio.com/

Image – 2 : Typescript 1st project.

After execution of above line you will see a VS code with main.ts file. This is work space to write Typescript code.

Now, we will write simple Typescript program and will compile the same. In Main.ts file I will write hello world program which same code structure as JavaScript and I compiled that using TSC and I got main.js. I shown the same processes in Image –  3 and Image – 4.

 

Image-3 : Hello TS program in Typescript.

Image -4 : Transpile Typescript to JavaScript using TSC.

Conclusion: In this article we understood basics of Typescript, advantages and features over JavaScript. Typescript is key to develop any angular applications. If you need more information on Typescript you can learn from here https://www.typescriptlang.org/docs/home.html. Thanks.

Happy coding 🙂