Quick Start With TypeScript

Introduction

This article will cover the following.

Brief Concepts
Implementation – Download and install TypeScript using NPM
Implementation – Download and install TypeScript in VS 2015 for IntelliSense
Implementation – Create a basic Customer application with a few core concepts using TypeScript and VS 2015

Class, Property creation, and Method creation
Inheritance
Getter and setter
Exception with try, catch and finally
Export and import concept
Loader concept -- SystemJS

What is TypeScript?

It is an open-source language created by Microsoft in October 2012.
It is designed for the development of large applications.
It is a typed superset of JavaScript that compiles to JavaScript eventually.

Benefits of Typescript

Coverts to JavaScript only
TypeScript converts the OO code into the JavaScript only by providing the power of object-orientation.

Rapid Application Development
Because of the object-oriented concepts, it allows us to write code very quickly and clean as well.

Incorporate all features of Javascript
TypeScript community is constantly upgrading their version by incorporating all the features of ECMA 5 and later versions, so it's worth to rely on.

Implementation – Download and install TypeScript using NPM

Steps to be followed

Go to the URL -- https://www.typescriptlang.org/#download-links and install TypeScript using NPM. For that, you need to install Node.

Here, you are good to go with TypeScript then.

Implementation – Download and install TypeScript in VS 2015 for IntelliSense.

Steps to be followed

Visit the URL -- https://www.microsoft.com/en-us/download/confirmation.aspx?id=48593, and download and then install. Make sure, your VS is closed at that time.

Implementation – Create a basic Customer application using TypeScript with a few core concepts using VS 2015.

Class, Property creation and Method creation
Inheritance
Getter and setter
Exception with try, catch and finally
Interface
Export and import concept
Loader concept -- SystemJS

Steps to be followed

Open VS 2015 and create a project named “TypeScript-Sample-1” and choose empty template.

Create a Customer.html file and add a blank <script> tag here.

Create a Customer.ts file

Class, Property creation and Method Concept

- Create a class named Customer and save the file. We can see the auto-generated Customer.js file in VS.

- Refer to the Customer.js file in the HTML file.

- Write the code to create an object of Customer class.

- Run the application. There, we can see a couple of alerts of ‘Gourav’ and ‘Called Validate’.

Inheritance

- Create a class named as CustomerModified and extend it from the Customer class.

- Write the code to check the modified class object creation.

- Run the application. There, we can get alert of the extended class ‘Called CustomerModified Validate’.

Getters and Setters

- Create a getter and setter for _customerName in Customer class.

- Write the code in the HTML file to use getters and setters for CustomerName.

- Run the application. There, we can get the alert using getters and setters.

Exception with try, catch and finally

- Incorporate the exception in the JS file with the "throw" keyword in the CustomerModified Validate method.

- Write the code in an HTML file to handle the exception using try, catch, and finally.

- Run the application. There, we can see a couple of alerts – first is of exception and then of finally.

Export and import concept

- Create another class named Address and mark that class as export so that it can be imported in any class.

- Import the Address class into Customer class and use its property into the validate method and show in the alert.

- Run the application – The application will break because export is not defined. So, to resolve this issue, we need to include loader i.e. SystemJS which is covered in the next section.

Loader concept -- SystemJS

- Include SystemJS package using NPM using the following command – “npm install SystemJS” and it would be installed.

- Copy this folder and paste into your solution and refer the SystemJS file in the HTML file after that.

- Write some code in the HTML script tag to use the SystemJS package and call the Customer class object. Internally address the object property as well.

- Run the application. Here, you can see the value of plot-number in the alert which was a part of Address class.

Note - A demo file is attached to this article for reference. Happy Learning!