Proper object modeling is becoming more important in JavaScript development as client side features are growing in complexity. Most object models don't require inheritance, but for those that do, JavaScript is lacking proper/intuitive constructs to support it natively. True, it is possible to inherit objects in JavaScript through the prototype chain, but it still leaves a lot to be desired compared to languages where object oriented code is more of a first class citizen. In this post I have added an example of how to bring more streamlined inheritance to JavaScript through TypeScript.

Obviously TypeScript is just a workaround for the underlying problem of short comings in JavaScript. However, the good news is that TypeScript is forward thinking and implements the current ES6 proposal for class-based object-oriented programming. This means the transition to ES6 should be smooth sailing when the time comes.

TypeScript inheritance should look very familiar to developers who come from a background in class based object oriented code (e.g. C#, Java, C++ etc). Not only does it support n levels of inheritance, but there is also support for interfaces and data types.

The example I am using is a classic example involving vehicles and derived higher level vehicles like cars and trucks.

class Vehicle implements IVehicle{ constructor(public color:string){ } start(type:string){ return 'the ' + this.color + ' ' + type + ' started'; } } interface IVehicle { start(type:string): string; } class Car extends Vehicle { constructor(color:string) { super(color); } start(){ return super.start('car'); } } interface ITrunk{ openTrunk():void } interface IWindow{ openWindow():void } class Sedan extends Car implements ITrunk, IWindow{ constructor(color:string) { super(color); } start(){ return super.start() + ' and it is a Sedan'; } openTrunk(){ console.log('Trunk is open'); } openWindow(){ console.log('Window is open'); } } class Truck extends Vehicle { constructor(color:string) { super(color); } start(){ return super.start('truck'); } } var car = new Car('green'); var sedan = new Sedan('red'); sedan.openTrunk(); sedan.openWindow(); var truck = new Truck('blue');

As you can see from the code listing above, the base line for the example is a vehicle class and an interface called IVehicle. “Vehicle” forms the foundation for both the Car and Truck classes, and at the top of the class hierarchy we find the Sedan class which is a specialized Car.

Sedan inherits Car, but it also implements two interfaces; ITrunk and IWindow. Multiple inheritance at the class level is not supported, so a class can only extend a single class. However, as mentioned above, multiple interfaces can be implemented by a single class.

Looking at the code it's pretty obvious that TypeScript really simplifies the creation of deep object hierarchies. If you want to get a jump start on ES6 I would recommend checking out TypeScript.