TypeScript examples

Getting started with TypeScript

In 2012, Microsoft introduced TypeScript, which considered as a super-set of JavaScript. Now, Angular 2 has also built using TypeScript and Angular team recommends developers to use TypeScript for developing Angular 2 projects.

TypeScript latest version is 2.1. In this version new features have been added for more information Click here .=

Even though last version of AngularJS, which is AngularJS 1 was a big success but Angular 2 preferred Typescript to build, as such a major framework uses TypeScript to make use of such a language worth it.

JavaScript is an old language and popular, still why this new language called TypeScript? As many developers come from a background of object oriented languages (like Java, .Net etc)

Do you think TypeScript behaves as same as any other OOPs language? The answer is NO. Now, let us give some examples that OOPs concepts used in TypeScript.

Examples contain 3 files Typescript file, converted JavaScript file (i.e., Transpiled file) and HTML file.

Private variables can be accessed outside Class!

 

//employee.ts

class Employee {

   private _EmployeeCode: String = "Cronj123"; //Declared as private

}



//employee.js(Transpiled Code)

var Employee = (function () {

   function Employee() {

       this._EmployeeCode = "Cronj123"; //_EmployeeCode is converted to public

   }

   return Employee;

})();



//employee.html

<!DOCTYPE html>

<html>

<head>

   <title></title>

 <meta charset="utf-8" />

   <script src="employee.js"></script>

</head>

<body>

   <script>

       var employee = new Employee();

       alert(employee._EmployeeCode); // _EmployeeCode can be accessed.

   </script>

</body>

</html>

Protected variables are also converted to Public!

 

 

//employee.ts

class Employee {

   protected _EmployeeSalary: String = "100000"; //Declared as protected

}

//employee.js(Transpiled Code)

var Employee = (function () {

   function Employee() {

       this._EmployeeSalary = "100000"; //Converted to public as well

   }

   return Employee;

})();

//employee.html

<!DOCTYPE html>

<html>

<head>

   <title></title>

  <meta charset="utf-8" />

   <script src="employee.js"></script>

</head>

<body>

   <script>

       var employee = new Employee();

       alert(employee._EmployeeSalary); //_EmployeeSalary can be accessed as well

   </script>

</body>

</html>

No Equivalent Code is Transpiled for Interface!

 

//employee.ts

interface Tax {     //interface having IncomeTax function.

   IncomeTax();

}

class Employee implements Tax {  //Class implements interface Tax

   IncomeTax() {

       alert("Income Tax Function");

   }

}

//employee.js ( Transpiled code)

var Employee = (function () {

   function Employee() {

   }

   Employee.prototype.IncomeTax = function () {

       alert("Income Tax Function");

   };

   return Employee;

})();

//employee.html

<!DOCTYPE html>

<html>

<head>

   <title></title>

 <meta charset="utf-8" />

   <script src="employee.js"></script>

</head>

<body>

   <script>

       var employee = new Employee();

       employee.IncomeTax();

   </script>

</body>

</html>

 

Wrapping Up:

Hope these examples help you to understand the behavior of TypeScript and if you want to explore more about TypeScript Click Here

Please reach out to CronJ for more assistance!

Looking for AngularJS Development Company, Your search ends here!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.