Object Oriented Programming with TypeScript

Object Oriented Design is the better approach for modeling and solving real world problems. OOP can map most real world problems with concepts called classes and objects. In plain JavaScript the support for classes added in the ES5 standard. Due to it's weird syntax of prototyping, pace of adoption by the developer community is less. In contrast TypeScript provides the better syntactical constructs those actually make sense to a developer coming from Java or C# community.

Limitations of JavaScript implementation of OOP

JavaScript is a dynamic and versatile programming language which we can treat as a procedural and functional styled toy language. Recently JavaScript is evolved through ES5 and ES6 but still has a prototype based Object Oriented Design constructs in it.

Self is a prototype based programming language.Let us take an example of a class and it's members implementation in JavaScript.

var Player = function (Name) {
  this.Name = Name;
};

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.Name);
};

var player1 = new Player("Messi");
player1.sayHello(); // prints "Hello, I'm Messi"

In JavaScript, classes are designed using functions. Player is the class we defined above. For every class there will be two members.

• Member variables
• Member Functions

Name is the member variable of Player class sayHello is the member function of Player class. It is a function attached to class using prototype property.

JavaScript's versatility allows us to assign a function to a variable. So I can assign even class function to an outside variable.

var helloFunction = player1.sayHello;
helloFunction();  // prints "Hello, I'm undefined"

This tells how confusing JavaScript class definition is. It never tells you what are the possible things you can do or cannot. JavaScript is so powerful so that you don't know the safest and sound way of implementing the OOP. In the next chapter we discuss more about object oriented principles.

Risky flexibility of JavaScript objects

Dynamic language programmers like this functionality of JavaScript. We can modify properties on an object at run time. For example if we see this code snippet in JavaScript

var obj = { a:0 };
Object.defineProperty(obj, "increment", { get: function () { return this.a + 1; } });
console.log(obj.increment);

Here if we see, we can defined any number of properties on the fly on an object. Second thing is we can delete a property from an object using delete keyword in JavaScript.

delete obj.increment;
console.log(obj.increment); //prints undefined

These two features destroy the blueprint of a class by changing the uniform structure. Any part of the program can delete the property of object which contradicts the encapsulation. TypeScript provides a high level abstraction and will not allow us to make mistakes.

No type restriction on properties

The problem of weak typing system of JavaScript makes debugging painful in larger systems. The OOP concepts like classes in JavaScript won't restrict the passing of wrong type into a variable. TypeScript addresses this problem and provides strong typing for classes and other constructs.