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 the 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 a TypeScript application.

 
There are many editors in the market that allow you to write the TypeScript code.
However, all are not free to use. The 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)
Node.js
 
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 typescript 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 a 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
  1. Console.Log(“Hello World”);  
That’s it. We have created a TypeScript Hello World application.
 

How to compile and run the TypeScript

 
The 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 the newly created Js file is working or not, type the following code to run the file.
  1. 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.