Skip to main content

Type Script Language Features – Classes, Inheritance & Overriding

Type Script brings a lot more structure and object oriented goodness to JavaScript, thought under the hood it is just a Syntax sugar for JavaScript. This article uncovers some basic Object Oriented Programming concepts introduced by Type Script, that will wrap the ‘bad parts’ of JavaScript under the carpet so that you can write better code.

imageI suggest you read my post “An Introduction To Type Script” before you read this article.

In this post, Let us explore few features about Classes, Inheritance and Method Overriding in TypeScript.

Classes in Type Script

Classes in TypeScript closely resembles the ECMA proposal according the the language specification. Classes can have private or public members.

Let us start with a very minimal Animal Class in Type Script.  Our Animal class also got a parameterized constructor, that takes name as an input to store it in the 'name' variable of type string, when the instance gets created.

//Our Animal Class
class Animal {

    //Name 
    public name: string;

    //Animal Constructor
    constructor (name: string) {
        this.name = name;
    }

    //A Method, the scope is public by default. ‘this’ points to the class instance
    sayName() {
     
         var span = document.createElement("span");
         span.innerText ="My Name Is" + this.name;
         document.body.appendChild(span);
    }

}

//Let us do something in onload
window.onload = () =>
{
   //Create an instance of Animal
    var a = new Animal("Tommy");
	
   //Invoke the method	
    a.sayName();
}

 

You should see the message from the sayName method, "My name is Tommy".

Parameter property declaration

In the above example, you could find that we are accepting the ‘name’ parameter via a constructor, and then assigning that to a property with name ‘name’. TypeScript has a short cut notation to declare properties with the same name and value as the constructor parameter. For this, you can prefix a constructor parameter with either ‘private’ or ‘public’, so that a property will be declared for you. The below code is functionally equivalent to the above code, see that we are not declaring the property explicitly though it is getting created for us.

//Our Animal Class
class Animal {

    //Animal Constructor. Note that I’m having a 
    //public specifier to the parameter
    constructor (public name: string) {
        //Look ma, I'm not explicitly declaring
        //or assigning to a name
    }

	//A Method, the scope is public by default
    sayName() {
        //The name property is created for you, so you can
        //access this.name
         var span = document.createElement("span");
         span.innerText ="My Name Is" + this.name;
         document.body.appendChild(span);
    }
}

//Let us do something in onload
window.onload = () =>
{
	//Create an instance of Animal
    var a = new Animal("Tommy");
	
	//Invoke the method	
    a.sayName();
}

Run this now, and you should get the same output as the previous one. That was interesting, right?

Inheritance & Overriding

Now, let us quickly explore some inheritance concepts in Type Script. Consider a simple example where you are inheriting a Dog class from the Animal class. You can use the 'extends' key word to extend from a base class. You can also override methods. A derived class will inherit all public members from it’s base class.

//Our Animal Class
class Animal {

	//Animal Constructor
    constructor (public name: string) {
    }

	//A Method, the scope is public by default
    sayName() {
         var span = document.createElement("span");
         span.innerText ="My Name Is" + this.name;
         document.body.appendChild(span);
    }
}


//Let us inherit Dog from Animal
class Dog extends Animal {

    //Override sayName method with some other logic, as usually dogs bark before 
    //saying their name ;)
    sayName() {
         var span = document.createElement("span");
         span.innerText ="Bow Bow, My Name Is" + this.name;
         document.body.appendChild(span);
     }
}

//Let us do something in onload
window.onload = () =>
{
   //Create an instance of Dog and store in an Animal variable
    var a: Animal = new Dog("Tommy");
   //Invoke the method, this will invoke sayName() in Dog class	
    a.sayName();
}

Now, a.sayName() will invoke the sayName(..) method in Dog class.  Now, how will you down cast an instance of Dog from variable a of type ‘Animal’ back to a variable of type Dog?

//Create an instance of Dog and store in an Animal variable
var a: Animal = new Dog("Tommy");

//This will result in an error as what ever you stored in a can be a some other type
//inherited from Animal instead of dog.
var d: Dog = a;

This is how to downcast properly, checkout the <type> syntax
   
//Create an instance of Dog and store in an Animal variable
var a: Animal = new Dog("Tommy");
//Downcasting by ensuring a proper type
var d: Dog = <Dog> a;  

‘super’ Keyword

You can use the super keyword in the constructor of a derived class, to pass the parameters to the base class constructor. Super calls for passing parameters are not allowed outside the constructor in TypeScript, though you can use super keyword to invoke methods of the base class from the derived class. Here is a quick example. See that we are passing the name to the base class constructor from the derived class constructor. Also note that we are using parameter property declaration to declare properties with the same name and value as constructor parameters, as explained above.
//Our Animal Class
class Animal {
	//Animal Constructor
    constructor (public name: string) {
    }
}

class Dog extends Animal {
      //Dog Constructor

      //We are leveraging parameter property declaration
      //to automatically create name and age properties
      constructor (public name: string, public age:number)
      {
        //Note that we are passing name to the 
        //base class constructor to initialize
        super(name);
      }

    sayHello() {
         var span = document.createElement("span");
         span.innerText = "Hello, I'm " + this.name + " with age " + this.age;
         document.body.appendChild(span);
     }
}

//Let us do something in onload
window.onload = () =>
{
  
    //Create an instance of Dog 
    var d: Dog = new Dog("Jim",20);    
    //Make the dog say hello
    d.sayHello();
   
}


Other than using Super for passing constructor parameters to base class, you may also use super for invoking methods in base class - like super.methodName() from methods in your derived class. I intentionally missed covering few other interesting aspects including Modules, Interfaces, Function Overloading, Function types etc - that is for another post.

Stay tuned, and subscribe now.

 

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…

Hack Raspberry Pi – How To Build Apps In C#, WinForms and ASP.NET Using Mono In Pi

Recently I was doing a bit of R&D related to finding a viable, low cost platform for client nodes. Obviously, I came across Raspberry Pi, and found the same extremely interesting. Now, the missing piece of the puzzle was how to get going using C# and .NET in the Pi. C# is a great language, and there are a lot of C# developers out there in the wild who are interested in the Pi.In this article, I’ll just document my findings so far, and will explain how develop using C# leveraging Mono in a Raspberry Pi. Also, we’ll see how to write few minimal Windows Forms & ASP.NET applications in the Pie as well.Step 1: What is Raspberry Pi?Raspberry Pi is an ARM/Linux box for just ~ $30. It was introduced with a vision to teach basic computer science in schools. How ever, it got a lot of attention from hackers all around the world, as it is an awesome low cost platform to hack and experiment cool ideas as Pi is almost a full fledged computer.  More About R-Pi From Wikipedia.The Raspberry Pi