typescriptのclassで継承元のメソッドを呼ぼうとしたら怒られた時 (typescript error 2340)

概要

以下のコードは何が駄目か分かるでしょうか？

export class Hoge {
  public getA = () => 1;
}

export class Huga extends Hoge {
  public getA = () => {
    
    /*
    * error! 
    * 
    * 'super' キーワードを使用してアクセスできるのは、
    * 基底クラスのパブリック メソッドと保護されたメソッドのみです。ts(2340)
    */
    return super.getA();
  };
}

解決

エラー文だけ見ると「publicなのになんで？」という感じなのですが、ここで大事なのはそこではなく、「本来methodにするべき箇所でpropertyを使ってしまっている」という場所が問題です。

すなわち、以下にすると解決します。

export class Hoge {
  public getA() {
    return 1;
  }
}

export class Huga extends Hoge {
  public getA() {
    return super.getA();
  }
}

typescriptやjavascriptで書いていると、特にarrow functionのせいで変数でも関数でも差が無いように思い込みがちですが、classにおいてのpropertyとmethodは全く別物です。

細かい差異はいくつか他にもあるのですが、上記のように継承元の「method」を呼ぶことはできても「property」を呼ぶことはできないので注意しましょう。