はじめに

TypeScriptでクラスを使用する際、インスタンスを作成せずにクラスレベルでアクセスできる機能として「静的フィールド」と「静的メソッド」があります。

この記事では、サバイバルTypeScriptを参考に、これらの機能について学んでいきます。

静的フィールドと静的メソッドとは

staticキーワードを使用することで、クラスのインスタンスではなく、クラス自体に関連つけられたフィールドやメソッドを定義することができます。

基本的な使い方

class MyClass {
  static x = 0;  // 静的フィールド

  static printX(): void {  // 静的メソッド
    console.log(MyClass.x);
  }
}

// 静的メソッドの呼び出し
MyClass.printX(); // 出力: 0

通常のフィールド・メソッドとの違い

比較のため、通常のインスタンスフィールドとメソッドを持つクラスを見てみます。

class MyClass2 {
    x = 0;  // インスタンスフィールド

    printX(): void {  // インスタンスメソッド
        console.log(this.x);
    }
}

// インスタンスメソッドを呼び出すにはインスタンス化が必要
const myclass2 = new MyClass2();
myclass2.printX();  // 出力: 0

// 以下はエラーになります
// MyClass2.printX();
// Error: Property 'printX' does not exist on type 'typeof MyClass2'.

静的メンバーを使用するメリット

グローバルな状態管理
- クラス全体で共有される値を管理できる
- インスタンス間で共通の情報を持つことができる
ユーティリティ関数の実装（クラスベースの場合）
- インスタンス化が不要な便利な関数をクラスにまとめることができる
- 関連する機能を論理的にグループ化できる

class MathUtils {
  static add(a: number, b: number): number {
    return a + b;
  }
}

const result = MathUtils.add(1, 2);
console.log(result); // 3

なお、このようなユーティリティ関数は、クラスベースでの書き方です。

プロトタイプベースでコードを記述する場合は単純なオブジェクトとしても実装できるため、採用するアプローチはプロジェクトやチームの方針によって異なってくるのかなという印象を受けました。

// プロトタイプベースの場合の書き方
const MathUtils2 = {
  add(a: number, b: number): number {
    return a + b;
  }
}

const resul2 = MathUtils2.add(1, 2);
console.log(result); // 3

まとめ

TypeScriptの静的フィールドと静的メソッドは、クラスレベルで共有される値や機能を実装する際に便利な機能であることを学びました。

参考文献

サバイバルTypeScript