Object Oriented Programming: JavaScript vs TypeScript in Visual Studio 2015

JavaScript has been the defacto web language for a very long time. It’s used for implementing client-side validation, animation, DOM manipulation, AJAX and for several other reasons. Developers have been using JavaScript in one form or other: e.g. plain vanilla JavaScript, jQuery, AngularJS etc. OOP in JavaScript is quite different than other languages, say C++/Java/C# etc. Here’s an example of a simple class in JavaScript:

//class, constructor function
var Employee = function (employeeId, employeeName, department) {
    //properties
    this.employeeId = employeeId;
    this.employeeName = employeeName;
    this.department = department;
    //method
    this.insertEmployee = function () {
        //insertEmployee logic goes here
    };
};

Alternatively, the above code can be written like this:

function Employee(employeeId, employeeName, department) { 

  this.employeeId = employeeId; 

  this.employeeName = employeeName; 

  this.department = department; 

} 

Employee.prototype.addEmployee = function () { 

  //insertEmployee logic goes here 

}; 

Wait, what? There’s no class keyword? No data types? class is a function? Yes! everything is a function in JavaScript.

Now you might say that you have spent years learning OOP syntax in other languages so how can you use similar syntax in JavaScript.

That’s where TypeScript comes into play. It’s created by Microsoft and lets you use a more “natural” / typical syntax and generates the JavaScript code 

behind the scenes. TypeScript is gaining popularity especially since AngularJS 2.0 is heavily utilizing it.

If you have Visual Studio 2015 then TypeScript is available OOB. For older version, like 2013, extension can be downloaded here: 

https://visualstudiogallery.msdn.microsoft.com/b1fff87e-d68b-4266-8bba-46fad76bbf22

Right click a web project in Visual Studio 2015, click Add New Item and select TypeScript:

Here’s the code for Employee.ts file:

class Employee {
    employeeId: number;
    employeeName: string;
    department: string;
    constructor(employeeId: number, employeeName: string, department: string) {
        this.employeeId = employeeId;
        this.employeeName = employeeName;
        this.department = department;
    }
    addEmployee() {
        //insertEmployee logic goes here
    }
};

That’s much closer to typical OOP syntax. There’s class keyword, properties construction & methods have much easier syntax and data types are there as well.

Visual Studio generates the corresponding JavaScript file behind the scenes

Here’s what the auto-generated code looks like:

var Employee = (function () {
    function Employee(employeeId, employeeName, department) {
        this.employeeId = employeeId;
        this.employeeName = employeeName;
        this.department = department;
    }
    Employee.prototype.addEmployee = function () {
        //insertEmployee logic goes here
    };
    return Employee;
})();
;

Here it’s using IIFE JavaScript syntax to return Employee function which represents the class.

So, we can see TypeScript has a much easier syntax. On day to day basis we can maintain the code in a TypeScript .ts file, but we do have to reference the auto-generated JavaScript file since web browsers only understand JavaScript, not the TypeScript.