Introduction

This article will cover the following.

What is TypeScript?

Benefits of Typescript

  • Coverts to JavaScript only
     TypeScript converts the OO code into the JavaScript only by providing the power of object-orientation.
Implementation – Download and install TypeScript using NPM
Steps to be followed
Here, you are good to go with TypeScript then.

Implementation – Download and install TypeScript in VS 2015 for IntelliSense.
Steps to be followed
Implementation – Create a basic Customer application using TypeScript with a few core concepts using VS 2015.
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!