Typescript - Trying to call method on abstract base with derived type as parameter

Issue

The abstract base has a method that takes a base/derived and performs something on it. Seems like I'm missing something with the typing, trying to find out what.

Attempt 1:

abstract class Base {
  protected runFuncOnThis = (func: (baseOrDerived: Base) => void) => {
    func(this);
  };
}

class Derived extends Base {
  public doIt = () => {
    this.runFuncOnThis((derived: Derived) => { // ERROR HERE
      console.log(derived);
    });
  };
}

Error: Argument of type '(derived: Derived) => void' is not assignable to parameter of type '(baseOrDerived: Base) => void'. Types of parameters 'derived' and 'baseOrDerived' are incompatible. Property 'doIt' is missing in type 'Base' but required in type 'Derived'.ts(2345)

Attempt 2:

abstract class Base2 {
  protected runFuncOnThis = <T extends Base2>(func: (baseOrDerived: T) => void) => {
    func(this); // ERROR HERE
  };
}

class Derived2 extends Base2 {
  public doIt = () => {
    this.runFuncOnThis((derived: Derived2) => {
      console.log(derived);
    });
  };
}

Error: Argument of type 'this' is not assignable to parameter of type 'T'. 'this' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'Base2'.ts(2345)

Solution

playground

Since you're using this in an arrow function, it means this is the current context (Base) meanwhile func wants Derived as its argument. Change the method type to a normal function (that has its own context) and define this as T extends Base to satisfy func's argument.

abstract class Base {
  protected runFuncOnThis<T extends Base>(this: T, func: (baseOrDerived: T) => void) {
    func(this);
  };
}

class Derived extends Base {
  public doIt = () => {
    this.runFuncOnThis((derived) => {
      console.log(derived);
    });
  };
}

class Derived2 extends Base {
  public doIt = () => {
    this.runFuncOnThis((derived) => {
      console.log(derived);
    });
  };
  public someProperty = 123;
}

Answered By - Undo