Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the purpose of the super() call in TS subclasses?

Tags:

typescript

Besides being annoying and making it so that every single subclass needs to be touched when a parent class is updated...

like image 428
user3583223 Avatar asked Jul 07 '16 22:07

user3583223


People also ask

What does super () do in TS?

Super property accesses are used to access base class instance member functions from derived classes. A super property access is permitted only in a constructor, instance member function, or instance member accessor of a derived class and must specify a public instance member function of the base class.

What does super () do in JS?

The super keyword in JavaScript acts as a reference variable to the parent class. It is mainly used when we want to access a variable, method, or constructor in the base class from the derived class.

What is super method in angular?

super is ES6 syntax that cannot be used outside the method where it's used. Given there is Foo class that extends Bar , super keyword is interpreted as Bar in Foo constructor and static methods and as Bar.

What is called by the call to super () below?

super() is called implicitly before the first line of any constructor, unless it explicitly calls super() or an overload itself, or the class is java. lang. Object. Follow this answer to receive notifications.


1 Answers

Consider the following code:

class A {
    protected sum: number;

    constructor(protected x: number, protected y: number) {
        this.sum = this.x + this.y;
    }
}

class B extends A {
    constructor(x: number, y: number) {
        super(x, y);
    }
}

The call to super in the ctor of class B calls the ctor of class A, and if we look at the compiled 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; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var A = (function () {
    function A(x, y) {
        this.x = x;
        this.y = y;
        this.sum = this.x + this.y;
    }
    return A;
}());
var B = (function (_super) {
    __extends(B, _super);
    function B(x, y) {
        _super.call(this, x, y);
    }
    return B;
}(A));

It should be clear why we do that, because otherwise everything that happens in the ctor of A wouldn't happen, that is members x, y and sum wouldn't be assigned in the instances of class B.

You might then ask "well, fine, but why doesn't that happen automatically? why can't the compiler just call super for me?"
That's a fair question, and I can think of 2 main reasons:

(1) Because sometimes you want to want to do something before calling super, for example:

class A {
    protected sum: number;

    constructor(protected x: number, protected y: number) {
        this.sum = this.x + this.y;
    }
}

class B extends A {
    constructor(x: number, y: number) {
        if (x % 2 === 0) {
            super(x, y);
        } else {
            super(x + 1, y);
        }
    }
}

You must call super before you access this in the ctor of B.

(2) It makes it explicit that this is what's happening, otherwise you might not expect it to happen because you don't see it.

This requirement is only valid for constructors, class methods are not required to call their super, but you are free to do so if you want to execute the parent method functionality.

like image 171
Nitzan Tomer Avatar answered Oct 23 '22 20:10

Nitzan Tomer