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!