Quick Start With TypeScript

Gourav Jain
7y
8.1k
0
7
100
Article

TypeScriptSample1.zip

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 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 super-set 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 obejct 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 that time.

Implementation – Create a basic Customer application using TypeScript with 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 as “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 as Customer and save the file. We can see the auto-generated Customer.js file in VS.

— Refer 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 CustomerModified Validate method.

— Write the code in 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 as 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.