Help us understand the problem. What is going on with this article?

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」を呼ぶことはできないので注意しましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away