Day 7 of 16— ”Classes I”

applied.math.coding
5 min readAug 23, 2021

This story is part of a series that has been initiated here:

Day 0 — ”How to run TypeScript”

If you want to follow all code examples, you should consult this to find some guidance on how to quickly set up a small TypeScript project.

If you come from an object-oriented language then what follows might be quite familiar to you. In this story, I want to present some more advanced features of classes which are very useful to know.

Classes end up being functions

If you create a class like

export class A{
aField: string = 'hello A';

aMethod(){
}
}

and compile it to JavaScript, then the output looks similar to

...
function A() {
this.aField = 'hello A';
}
A.prototype.aMethod = function () {};
...

You observe, the class has compiled to what is considered a ‘classic’ class in JavaScript. Fields are added to the object ( this.aField = ... ) and method are put on the function’s prototype ( A.prototype.aMethod = ... ).

Inheritance and prototype chaining

If you inherit a class A from a class B like so

class B {
bField = 'b';
bMethod(){};
}
class A extends B {
aField = 'a';
aMethod(){};
}

and compile this, then the outcome looks similar to this:

function B() {
this.bField = 'b';
}
B.prototype.bMethod = function () { };
function A() {
var _this = B.apply(this, arguments); // inheriting fields from B
_this.aField = 'a'; // defining/overwriting own fields
return _this; // returning the instance
}
__extends(A, B);
A.prototype.aMethod = function () { };

where __extends(A, B) in principle is doing this:

A.prototype = Object.create(B.prototype); // a new(!) object with prototype of B
A.prototype.constructor = A; // setting the…
applied.math.coding

Recommended from Medium

Lists

See more recommendations