How does extends in TypeScript work?

Question

The following TypeScript code:

class BaseClassWithConstructor {
    private _id: number;
    constructor(id: number) {
        this._id = id;
    }
}

class DerivedClassWithConstructor extends BaseClassWithConstructor {
    private _name: string;
    constructor(id: number, name: string) {
        this._name = name;
        super(id);
    }
}

Generates the following JavaScript code:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var BaseClassWithConstructor = (function () {
    function BaseClassWithConstructor(id) {
        this._id = id;
    }
    return BaseClassWithConstructor;
})();
var DerivedClassWithConstructor = (function (_super) {
    __extends(DerivedClassWithConstructor, _super);
    function DerivedClassWithConstructor(id, name) {
        this._name = name;
        _super.call(this, id);
    }
    return DerivedClassWithConstructor;
})(BaseClassWithConstructor);

extends seems to be implemented by the __extends function.

Being trying to work out the magic behind this function. I don't understand why we have to copy properties in the base class to the derived class (i.e. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];), and create a new object using the __ function and hook up the prototypes between the b, __, d and an instance of __.

What is the reasoning behind all this?

Maybe to support future classing? – Callum Linington Aug 25 '15 at 11:20 — Callum Linington, Aug 25 '15 at 11:20

score 0 · Answer 1 · answered Aug 25 '15 at 13:30

Until ECMAScript support for classes goes native, the extends function polyfills the expected behaviour of inheritance.

If you are used to the normal JavaScript prototypical inheritance, you'll be wondering why it isn't just doing the __.prototype = b.prototype; part. If so, you'll be interested to know that the addition of for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; means that static members will be copied too. For example...

class BaseClassWithConstructor {
    private _id: number;
    constructor(id: number) {
        this._id = id;
    }

    static doIt() {
        alert('Done it');
    }
}

class DerivedClassWithConstructor extends BaseClassWithConstructor {
    private _name: string;
    constructor(id: number, name: string) {
        this._name = name;
        super(id);
    }
}

DerivedClassWithConstructor.doIt();

score 0 · Answer 2 · edited May 23 '17 at 12:25

The generated javascript code can be divided in two parts:

for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];

is for "inheriting" the static properties of base class. Actually in the newest version of type script, this line of code has been substituted with

extendStatics(d, b);

where the definition of extendStatics is:

var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };

The only difference is that in new version, manipulation of [[prototype]] is used if related behavior is supported by browsers, otherwise fallback to the old practice, i.e. copying every owned property from base class to derived class.

And as for

function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __();

It is really a slightly fancier way of setting the prototype of d to a new instance of b. But instead of directly assigning new b(...) to d.instance, a dummy constructor __ is used since for the purpose of setting prototype, we don't need the constructor b to be really invoked, and by using dummy function, we don't need to pass arguments to the constructor. See this SO answer.

How does extends in TypeScript work?

2 Answers2

Linked