Typescript: How to reassign static function in child class?

Question

I have a parent class like so:

class SomeClass {

  public someProperty: number | undefined;

  constructor(value: number) {
    this.someProperty = value;
  }

  public on(eventType: string, fn: Function) {

  }
}

class Parent {

  protected static getTransform(value: number) {
    return value + 180;
  }

  public transform: SomeClass;

  constructor(value: number) {
    this.transform = this.createTransform(value);
  }

  protected createTransform(value: number) {
    const transform = new SomeClass(value);
    transform.on('rotate', this.rotate);
    return transform;
  }

  protected rotate(event: any) {
    this.transform.someProperty = Parent.getTransform(event.transform);
  }
}

And I need to implement child class that has different logic of transform property calculation. I need something, like so:

class Child extends Parent {

  protected static getTransform(value: number) {
    return value + 90;
  }

  constructor(value: number) {
    super(value);
  }
}

I haven't faced any errors or something else, but my approach doesn't work, nothing changed. How to implement same? Playground

Answer 1

... protected (which allows access from the same class and its subclasses, but not objects of a different class) ... Wiki: OOP

To clear the Member Visibility concept, here is a demo of your code (Please see the comments):

class SomeClass {

  public someProperty: number | undefined;

  constructor(value: number) {
    this.someProperty = value;
  }

  public on(eventType: string, fn: Function) {

  }
}

class Parent {

  protected static getTransform(value: number) {
    return value + 180;
  }

  public transform: SomeClass;

  constructor(value: number) {
    this.transform = this.createTransform(value);
  }

  protected createTransform(value: number) {
    const transform = new SomeClass(value);
    transform.on('rotate', this.rotate);
    return transform;
  }

  protected rotate(event: any) {
    this.transform.someProperty = Parent.getTransform(event.transform);
  }
}

class Child extends Parent {

  protected static getTransform(value: number) {
    return value + 90;
  }

  constructor(value: number) {
    super(value);
  }
}

class Example extends Child {
  constructor(value: number) {
      super(value)
    console.log(`In Example:`, Child.getTransform(700)) // this line will be called when `new Example()`
  }

  public static getTransform(value: number) {
    return Child.getTransform(600); // call parent method which is protected is valid
  }

}

// Example use cases:

console.log(`Call Child:`, Child.getTransform(800)) //  this will throw error:
// Property 'getTransform' is protected and only accessible within class 'Child' and its subclasses.

new Example(700) // inheritance can call parent method which is protected

console.log(`Call Example:`, Example.getTransform(1000)) // a function call that call parent protected method is ok.

TypeScript Playground <- You can click the Run button the see the result and the Errors tab to see the error messages.

Answer 2

I am not sure why you want to reassign a static function.. in your case you should override the rotate() function in Child and use the Child static method instead:

  protected rotate(event: any) {
    this.transform.someProperty = Child.getTransform(event.transform);
  }