Typescript: How to call method defined with arrow function in base class using super keyword in child class?

Question

Given

class BaseClass{

  count:number=0;

  public someMethod=():void =>{
      this.count++;
  }
}

class ChildClass extends BaseClass{
  public someMethod=():void=>{
     super.someMethod();
     //Do more work here.
  }
}

I receive the error message:

Only public methods of the base class are accessible via the 'super' keyword.

@Basarat provides some information here but this seems like a real hack to the language. typescript arrow operator to define a function on prototype

How might this be done while preserving contextual use of 'this'?

Am I using arrow functions properly or should they really only be used as a method of declaring something like a callback?

I am sure you already know ... but still wanted to share (hence a comment : https://www.youtube.com/watch?v=tvocUcbCupA&hd=1) — basarat, Apr 22 '14 at 12:54
I am trying to understand why you would want to use an arrow function this way at all. Is there a reason why you can't use a regular method on the prototype? — thoughtrepo, Apr 22 '14 at 14:07
I prefer writing classes that assume `this` is the class, and handling scope and context using `call`, `apply` or an arrow function where calling code changes that context. — Fenton, Apr 22 '14 at 21:23
@web2nr This question stems from usage of #Angular, where some of the methods of my objects wind up being callbacks. Because the callback isn't obvious within my own code (I'm not using `call` in my own code), I found that the the context of `this` was not consistent. I thought I could simply use the arrow function everywhere in my classes and thus callbacks to my class would just work and from an Angular perspective it did. As I discovered though, this prevents me from using #Typescript inheritance. I think in practice I will have to be selective in my usage of arrow functions. — Richard Collette, Apr 28 '14 at 17:38
@RichardCollette I think this is a legitimate shortcoming of TypeScript that you have identified. It shouldn't provide classes unless `this` in a method is *always* the class instance. Callbacks are no excuse because they can and should be implemented with top-level functions. I have learned to live with using the fat arrow syntax, that is until I had the need to override methods. Bug filed, but I suspect it will be dismissed as "by design". https://typescript.codeplex.com/workitem/2491 — Steve, May 06 '14 at 01:52

claytond · Answer 1 · 2019-02-12T19:20:52.653

For the sake of argument, assume you

Are using the fat-arrow syntax because the methods are being triggered by UI events or callbacks (in my case knockout click events)
Need inheritance to eliminate redundancy in UI (or callback) respondent code.

A minimally hackish (if not elegant) answer is to split your function into two calls that address the two issues:

Class A {
    public handleScope = () => {
        return this.handleInheritance();
    }

    public handleInheritance() {
        // do work
    }
}

Class B extends A {
    public handleInheritance() {
         super.handleInheritance() // super works here
         // additional work
    }
}

I'm the first to admit that doubling functions is "ugly", but IMHO a lot less ugly than the other options I've seen. To help standardize naming, I'm naming the one-line "scoping" function the name of the base function (e.g. myFunction) plus "Scoper" (i.e. myFunctionScoper). This is also IDE-friendly because you'll often get the Scoper method as a hinted option when you start to type the name for the inheritable method.

Such an elegant solution. Thanks! – Adrian Marinica Feb 11 '19 at 17:02 — Adrian Marinica, Feb 11 '19 at 17:02

basarat · Answer 2 · 2014-04-22T13:11:31.000

8

arrow functions properly or should they really only be used as a method of declaring something like a callback?

They should really only be used for callbacks. If you want a class hierarchy then use the prototype. prototype also saves you memory.

Forced fix: there is only one this and it is the current instance. If you overwrite this.foo in the child class the base instances this.foo is lost. Preserve the base version in the constructor

class BaseClass{

  count:number=0;

  public someMethod=():void =>{
      this.count++;
  }
}

class ChildClass extends BaseClass{

  constructor(){      
      super();
      var baseSomeMethod = this.someMethod;
      this.someMethod = ()=>{
          // implement here 
      }
  }

}

edited Apr 22 '14 at 13:11

answered Apr 22 '14 at 13:00

basarat

261,912
58
460
511

1

class Parent{ public foo=():void =>{ //stuff } } class Child extends Parent{ constructor(){ super(); var superFoo = this.foo; this.foo = ()=>{ superFoo(); } } } – humbolight Jun 30 '17 at 00:21
I thought it would be helpful to add a barebones arrow function inheritance refactor of your code, with language in reference to parent and super. For those trying to draw that parallel it may be easier to see here. – humbolight Jun 30 '17 at 00:31

score 1 · Answer 3 · answered Apr 22 '14 at 16:08

Without a function implementation in the prototype, there's no way for the derived class to 'find' the base class implementation. You can separate it out so that you have one method for preserving this and another for using via super:

class BaseClass {
  count: number = 0;

  someMethodImpl() {
    this.count++;
  }

  public someMethod = this.someMethodImpl;
}

class ChildClass extends BaseClass {
  public someMethod = (): void=> {
    super.someMethodImpl();
    //Do more work here.
  }
}

score 0 · Answer 4 · answered May 07 '14 at 11:53

Just would like to capture an "answer" to this question from another discussion here: https://typescript.codeplex.com/workitem/2491

Definitely not efficient in terms of memory or processing overhead but it does answer the question.

class Base {
    x = 0;
    constructor() {
        for (var p in this)
            if (!Object.prototype.hasOwnProperty.call(this, p) && typeof this[p] == 'function') {
                var method = this[p];
                this[p] = () => { method.apply(this, arguments); };
                // (make a prototype method bound to the instance)
            }
    }
}

class A extends Base {
    doSomething(value) { alert("A: " + value + " / x == " + this.x); }
}

class B extends A {
    doSomething(value) { alert("B: " + value + " / x == " + this.x ); super.doSomething(value); }
}

var b = new B();
var callback = b.doSomething;
callback("Cool!");

Typescript: How to call method defined with arrow function in base class using super keyword in child class?

4 Answers4

Linked