I am having an issue with webstorm typescript compiler. I have the following classes

export class rootData{
  id:string
  //...

  constructor(){
    //...
  }

  insert = ():Promise<any> =>{
    //...
  }
}

class child extends rootData {
  //...   

  constructor(){
     super();
  }

  insert = ():Promise<any> => {
        return super.insert();
    }
}

So typing "super", I see all rootData public methods in the intellisense. But after setting super.insert(), I get the following error :

TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword

Tried in TS playground, it is working (simplified version thought).

Thanks for your help.

EDIT: After checking the compiled javascript, the call of the super method is there. So the compiler gives an error but compiles...

I am having an issue with webstorm typescript compiler. I have the following classes

export class rootData{
  id:string
  //...

  constructor(){
    //...
  }

  insert = ():Promise<any> =>{
    //...
  }
}

class child extends rootData {
  //...   

  constructor(){
     super();
  }

  insert = ():Promise<any> => {
        return super.insert();
    }
}

So typing "super", I see all rootData public methods in the intellisense. But after setting super.insert(), I get the following error :

TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword

Tried in TS playground, it is working (simplified version thought).

Thanks for your help.

EDIT: After checking the compiled javascript, the call of the super method is there. So the compiler gives an error but compiles...

• javascript
• node.js
• typescript
• webstorm

2 Answers 2

Because super calls are redirected to the prototype you cannot use a property and need to use a method i.e. can't use = ()=>.

Fixed code:

export class rootData{
  id:string
  //...

  constructor(){
    //...
  }

  insert():Promise<any>{
    //...
  }
}

class child extends rootData {
  //...   

  constructor(){
     super();
  }

  insert():Promise<any> {
        return super.insert();
    }
}

You could create an "internal" method that is protected that actually performs the logic. Since you can't call it outside of the class, the this will always be in the correct context.

export class rootData{
  id:string
  //...

  constructor(){
    //...
  }

  insert = ():Promise<any> =>{
    return this.insertInternal();
  }

  protected insertInternal():Promise<any>{
    //...
  }
}

class child extends rootData {
  //...   

  constructor(){
     super();
  }

  protected insertInternal():Promise<any> {
        return super.insertInternal();
    }
}

You can view a TypeScript Playgound version of it here.