TypeScript 静的クラス解説

TypeScriptの静的クラスについて

TypeScriptにおける静的クラスは、JavaScriptのクラスを拡張し、クラス自体に直接プロパティやメソッドを持たせるための機能です。これらのプロパティやメソッドは、インスタンスを作成することなく、クラス名を通じて直接アクセスできます。

具体的な説明

• 静的メソッド
  クラス自体に属するメソッドです。インスタンスを作成せずに、クラス名を使って直接呼び出せます。

  class MyClass {
      static staticMethod() {
          console.log("This is a static method");
      }
  }
  
  MyClass.staticMethod(); // Output: "This is a static metho   d"
  

• 静的プロパティ
  クラス自体に属するプロパティです。インスタンスを作成せずに、クラス名を使って直接アクセスできます。

  class MyClass {
      static staticProperty = "This is a static property";
  }
  
  console.log(MyClass.staticProperty); // Output: "This is a static prope   rty"
  

活用シーン

• シングルトンパターン
  クラスのインスタンスを1つだけ生成し、そのインスタンスへのアクセスを管理する際に、静的プロパティを使ってグローバルにアクセスできるようにします。
• 定数
  クラス内で使用する定数を静的プロパティとして定義し、変更できない値として管理できます。
• ユーティリティ関数
  頻繁に使用する共通の関数を静的メソッドとして定義し、クラス名を通じて簡単に呼び出せます。

静的クラスの注意点

• 静的クラスを継承した場合、子クラスから静的プロパティやメソッドにアクセスできます。
• 静的プロパティやメソッドは、クラス自体に属しているため、インスタンスごとに異なる値を持つことはできません。

TypeScriptの静的クラス解説とコード例

静的クラスの定義と使用

class MyClass {
    static staticProperty = "This is a static property";

    static staticMethod() {
        console.log("This is a static method");
    }
}

// 静的プロパティのアクセス
console.log(MyClass.staticProperty); // Output: "This is a static property"

// 静的メソッドの呼び出し
MyClass.staticMethod(); // Output: "This is a static method"

ユーティリティ関数の例

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

    static subtract(a: number, b: number): number {
        return a - b;
    }
}

// ユーティリティ関数の使用
const result1 = MathUtils.add(3, 5);
console.log(result1); // Output: 8

const result2 = MathUtils.subtract(10, 2);
console.log(result2); // Output: 8

定数の例

class Constants {
    static readonly PI = 3.14159;
    static readonly E = 2.71828;
}

// 定数の使用
const circleArea = Constants.PI * Math.pow(5, 2);
console.log(circleArea); // Output: 78.53975

シングルトンパターンの例

class Logger {
    private static instance: Logger;

    private constructor() {}

    static getInstance(): Logger {
        if (!Logger.instance) {
            Logger.instance = new Logger();
        }
        return Logger.instanc   e;
    }

    log(message: s   tring) {
        console.log(message);
    }
}

// シングルトンパターンの使用
const logger1 = Logger.getInstance();
const logger2 = Logger.getInstance();

// 同じインスタンスを参照している
console.log(logger1 === logger2); // Output: true

logger1.log("Hello from logger1");
logger2.log("Hello from logger2");

継承と静的メンバー

class ParentClass {
    static staticProperty = "Parent property";

    static staticMethod() {
        console.log("Parent method");
    }
}

class ChildClass extends ParentClass {
    static staticProperty = "Child property";

    static staticMethod() {
        console.log("Child method");
    }
}

// 子クラスから静的メンバーへのアクセス
console.log(ChildClass.staticProperty); // Output: "Child property"
ChildClass.staticMethod(); // Output: "Child method"

// 親クラスの静的メンバーへのアクセス
console.log(ParentClass.staticProperty); // Output: "Parent property"
ParentClass.staticMethod(); // Output: "Parent method"

モジュール

• 例
  

  // mathUtils.ts
  export function add(a: number, b: number): number {
      return a + b;
  }
  
  export function subtract(a: number, b: number): number {
      return a - b;
  }
  

  // main.ts
  import    * as MathUtils from './mathUtils';
  
  const result = MathUtils.add(3, 5);
  console.log(result); // Output: 8
  

• 利点
  

  • ファイル単位でコードを整理し、名前空間を提供できる。
  • 他のモジュールとの依存関係を明確に管理できる。

ネストされた関数

• 例
  

  function createLogger() {
      return function log(message: string) {
          console.log(message);
      };
  }
  
  const logger = createLogger();
  logger("Hello from logger");
  

• 利点
  
  • 関数内部で定義されるため、スコープが限定される。
  • クラスの内部で定義することもできる。

オブジェクトリテラル

• 例
  

  const mathUtils = {
      add: (a: number, b: number): number => a + b,
      subtract: (a: number, b: number): number => a - b
  };
  
  const result = mathUtils.add(3, 5);
  console.log(result); // Output: 8
  

• 利点
  
  • シンプルで直接的な方法。
  • 必要なプロパティやメソッドだけを定義できる。

名前空間

• 例
  

  namespace MyNamespace {
      export class MyClass {
          // ...
      }
  
      export function myFunction() {
          // ...
      }
  }
  

• 利点
  

クラスのインスタンス

• 例
  

  class MyClass {
      // ...
  }
  
  const instance = new MyClass();
  instance.myMethod();
  

• 利点