TypeScript Overview & Configuration

TypeScript is a strongly typed language which we can call a superset of the JavaScript.

About TypeScript

TypeScript is a strongly-typed language that can be called a superset of JavaScript. TypeScript was introduced by Anders Hejlsberg, lead architect of C#. TypeScript is maintained by Microsoft.

The current version of TypeScript is 2.8 ( as of March 24, 2018).

Why and when to use TypeScript?

Generally, front-end programmers use JavaScript language to build rich and fast applications. Since most of the full stack developers face issues in developing the applications with JavaScript, many of them are tied with object-oriented concepts. However, they cannot implement it completely with plain JavaScript because it is very tough for them. Here, TypeScript helps the programmers to write JavaScript code without any limit. A programmer has to write the code in TypeScript according to their requirement and TypeScript compiler will take care of converting the code into JavaScript.

Very simple, right …?

Features Of TypeScript

  • Easy to write maintainable codes.
  • Easy to identify the issues in the code - easy debugging.
  • Good for enterprise-level applications.
  • Feasible to write classes and modules in JavaScript.
  • Supports WinJS too.
  • Angular 2 is built on TypeScript so it is very easy to write an application in Angular 2 with TypeScript.
  • TypeScript easily integrates with Taskrunners like Grunt, Gulp.

IDE (Integrated Development Environment ) to develop TypeScript application.

There are many editors in the market which allow you to write the TypeScript code.

However, all are not free to use. Selection of IDE is up to you. I am familiar with Visual Studio, so I have chosen Visual Studio Code.

Configure TypeScript application

To configure a TypeScript project, the following prerequisites should be installed on your system.

  • Node.js (https://nodejs.org/en/download)
  • Any Editor (Visual Studio Code (https://code.visualstudio.com/) as I mentioned earlier)
  • TypeScript (https://www.npmjs.com/package/typescript)

Nodejs

Initially, you have to download and install the Nodejs from the mentioned link. Better to download the latest version.

Typescript

 Editor

Download Visual Studio Code Installer file from the above link and install it.

An overview of VSC 
 
( I’m using VSC short form for Visual Studio Code from now onwards ).

When we open the VSC, we can see options like File, Edit, Selection, View etc in the main menu similar to the other editors.

Typescript

 We will be having left navigation menu for handling the Project specifics.

Typescript

 Let’s discuss each of them.

  • Typescript File Explorer => to handle the files of the project

  • Typescript Search => To search the files in the current project.

  • Typescript Source Control => it’s the source control tab to handle the project source. It's purely based on the extension availability. Currently, we are having SCM extensions for VSC are SVN, GIT

  • Typescript Debugger=>To debug the code in VSC.

  • Typescript Extensions=> to install any kind of extensions to VSC we have to click this and search for the relevant extension. There are many extensions available in the market.

TypeScript

Create a folder in your system and name it TypescriptFirstSample.

Typescript

Open the Visual Studio code. Open the folder you recently created.(Main Menu->File->Open Folder) 

Typescript

Click Ctrl + `, now you can see the terminal window. Type the following text and press enter.

npm install -g typescript

You can see that TypeScript is installing on your system.
Typescript

How to check type script installed or not

We can check the TypeScript version with the following code. If TypeScript is installed, the version will show up.

tsc --version

Typescript

That’s it, we have set up the environment to create the TypeScript application.

Let’s see how to write some code in TypeScript.

We have already opened the VSC and opened a created folder. Now, we are going to create typescript HelloWorld application in the same folder.

Create a new file in VSC in the opened folder. Name the newly created file HelloWorld.ts.

Typescript

 .ts is the extension to TypeScript files.

Type the following code in the file

Console.Log(“Hello World”);

That’s it. We have created a TypeScript Hello World application.

How to compile and run the TypeScript

TypeScript application lifecycle goes as follows.

Typescript

Type the following code in the terminal window to compile the HelloWorld.ts file.

tsc  helloworld.ts

Now, go to the folder. You can identify a new HelloWorld.js file with code.

Just refresh the VSC to see the newly created js file if the file is not visible on the VSC.

To check whether newly created Js file is working or not, type the following code to run the file.

node helloworld.js

You can observe that Hello World log appears in the terminal window.

Typescript

That's it. We have seen how to configure and create a very simple application with TypeScript.