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.
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.
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.
We will be having left navigation menu for handling the Project specifics.
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.
Open the Visual Studio code. Open the folder you recently created.(Main Menu->File->Open Folder)
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.
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
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.
.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
The TypeScript application lifecycle goes as follows.
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.
You can observe that Hello World log appears in the terminal window.
That's it. We have seen how to configure and create a very simple application with TypeScript.