Typescript Deep Dive by Basarat Ali Syed

TypeScript Deep Dive
Classes
The reason why its important to have classes in JavaScript as a first class item is that:
1. People like to use classes
2. Provides a consistent way for developers to use classes instead of every framework (emberjs,reactjs etc) coming up
with their own version.
Finally JavaScript developers can have class . Here we have a basic class called Point:
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
add(point: Point) {
return new Point(this.x + point.x, this.y + point.y);
}
}
var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}
This class generates the following JavaScript on ES5 emit:
var Point = (function () {
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
return Point;
})();
This is a fairly idiomatic traditional JavaScript class pattern now as a first class language construct. Note that constructor
is optional.
Inheritance
Classes in TypeScript (like other langauges) support single inheritance using the extends keyword as shown below:
class Point3D extends Point {
z: number;
constructor(x: number, y: number, z: number) {
super(x, y);
this.z = z;
}
add(point: Point3D) {
var point2D = super.add(point);
return new Point3D(point2D.x, point2D.y, this.z + point.z);
}
}
If you have a constructor in your class then you must call the parent constructor from your constructor (TypeScript will point
this out to you). This ensures that the stuff that it needs to set on this gets set. Followed by the call to super you can add
Classes
12