【TypeScript】staticメソッドの基本的な使い方

staticメソッドについて学んだのでアウトプットしたいと思います。

staticメソッドとは
staticメソッドの書き方
staticメソッドの使い方
1. staticプロパティも同様

staticメソッドとは

staticとは「静的な」という意味です。つまり、静的なメソッドということです。

あるクラス内にメソッドがあり、そのメソッドにアクセスするには、一度クラスをインスタンス化した後でなければそのメソッドを使用することができません。しかし、staticメソッドはクラスをインスタンス化せずに使用することができます。

あまりピントこないと思いますので、この後の使用例を見てください。

staticメソッドの書き方

staticメソッドは以下のように記載し、呼び出します。呼び出し方ですが、上記で記載した通りstaticメソッドを使用するためにインスタンス化をする必要はありません。

static メソッド名(){ }

クラス名.メソッド名();

staticメソッドの使い方

では、実際にstaticメソッドを使ってみます。

//ex1
class Humam {
  static add(){
    console.log('a');
  }
}
Humam.add(); //a

//ex2
class Humam {
  static add(tall: number){
    return tall;
  }
}
console.log(Humam.add(170)); //170

Humamクラスをインスタンス化せずにstaticのaddメソッドにアクセスすることができました。

staticプロパティも同様

staticプロパティも同様に以下のように使用できます。

class Humam {
  static addNumber: number = 6;
}
console.log(Humam.addNumber); //6

注意点

staticプロパティはクラス内のconstructor内で「this.〇〇」とアクセスしようとするとエラーが表示されます。この場合、「クラス名.staticプロパティ名」としなければなりません。

class Humam {
  static addNumber: number = 6;
  constructor(){
    let a = this.addNumber; //エラー。addNumberにカーソルを合わせると以下のエラーが表示される
  }
}

上記のようにthisとstaticは別物なので注意が必要です。

以下のようにstaticプロパティはstaticメソッド内であれば this.~ とアクセスすることができます。(この時のthisはHumamクラスを指しています)

class Humam {
  static addNumber: number = 6;
  constructor(){
    // let a = this.addNumber; 
  };
  static getStatic(){
    return this.addNumber = 7;
  }
}
console.log(Humam.getStatic());

以下の記事も合わせて読んでいただけると幸いです。