TypeScript 静的クラスの代替方法：従来のクラス、関数、モジュール、オブジェクトリテラル

2024-04-02

TypeScript 静的クラス：JavaScript クラスの進化

JavaScript のクラスは、オブジェクト指向プログラミング (OOP) の重要な要素です。しかし、従来の JavaScript クラスにはいくつかの制限がありました。TypeScript の静的クラスは、これらの制限を克服し、より強力で柔軟なクラスを作成するための新しい方法を提供します。

従来の JavaScript クラスの制限

インスタンス化の必要性: メソッドやプロパティを使用するには、まずクラスをインスタンス化する必要があります。
状態の保持: クラスのインスタンスはそれぞれ独自の状態を持ちます。
静的メソッドの欠如: クラスに属するが、インスタンスとは独立したメソッドを作成できません。

TypeScript 静的クラスの利点

インスタンス化不要: 静的クラスはインスタンス化せずに使用できます。
静的メンバー: メソッドやプロパティをクラスに属するものとして定義できます。
ユーティリティクラス: 共通機能を提供するクラスを作成しやすくなります。
コードの簡潔化: インスタンス化の必要がないため、コードが簡潔になります。

class MathUtils {

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

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

}

const sum = MathUtils.add(10, 20); // 30
const difference = MathUtils.subtract(20, 10); // 10

この例では、MathUtils という名前の静的クラスを作成しています。このクラスには、add と subtract という 2 つの静的メソッドがあります。これらのメソッドは、MathUtils クラスをインスタンス化せずに直接呼び出すことができます。

シングルトン: 静的クラスはシングルトンパターンを実装するのに役立ちます。
名前空間: コードを整理し、名前空間の衝突を回避するために使用できます。

注意点

静的クラスは、インスタンス固有の状態を持つことができません。
this キーワードは、静的メソッド内では使用できません。

TypeScript 静的クラスは、従来の JavaScript クラスよりも強力で柔軟なクラスを作成するための新しい方法を提供します。静的クラスを使用することで、コードを簡潔化し、コードの再利用性を向上させることができます。

ユーティリティクラス

class StringUtils {

  static capitalize(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }

  static padLeft(str: string, length: number, padChar: string = ' '): string {
    while (str.length < length) {
      str = padChar + str;
    }
    return str;
  }

}

const name = "taro";
const capitalizedName = StringUtils.capitalize(name); // Taro
const paddedName = StringUtils.padLeft(name, 10); // "      taro"

console.log(capitalizedName); // Taro
console.log(paddedName); // "      taro"

capitalize メソッドは、文字列の先頭の文字を大文字に変換します。
padLeft メソッドは、文字列を左側から指定された文字で埋めます。

シングルトン

class Database {

  private static instance: Database;

  private constructor() {}

  static getInstance(): Database {
    if (!Database.instance) {
      Database.instance = new Database();
    }
    return Database.instance;
  }

  // データベースへの接続処理
  // ...

}

const db1 = Database.getInstance();
const db2 = Database.getInstance();

console.log(db1 === db2); // true

この例では、Database という名前のシングルトンクラスを作成しています。このクラスは、getInstance という静的メソッドを使用して、唯一のインスタンスを取得できます。

名前空間

namespace Math {

  export function add(a: number, b: number): number {
    return a + b;
  }

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

}

const sum = Math.add(10, 20); // 30
const difference = Math.subtract(20, 10); // 10

console.log(sum); // 30
console.log(difference); // 10

この例では、Math という名前空間を作成しています。名前空間を使用することで、コードを整理し、名前空間の衝突を回避することができます。

上記は TypeScript 静的クラスのいくつかの例です。これらの例を参考に、さまざまなユースケースに合わせて TypeScript 静的クラスを活用してください。

TypeScript 静的クラスの代替方法

TypeScript 静的クラスを使用する前に、従来の JavaScript クラスで実現できないか検討する必要があります。従来の JavaScript クラスは、インスタンス化が必要ですが、多くのユースケースでは問題ありません。

関数

単純なユースケースの場合は、静的メソッドを個別の関数として定義することができます。

function add(a: number, b: number): number {
  return a + b;
}

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

const sum = add(10, 20); // 30
const difference = subtract(20, 10); // 10

console.log(sum); // 30
console.log(difference); // 10

モジュール

複数の関連する関数や変数をまとめる必要がある場合は、モジュールを使用することができます。

export function add(a: number, b: number): number {
  return a + b;
}

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

// 別のファイルでインポート
import { add, subtract } from './math';

const sum = add(10, 20); // 30
const difference = subtract(20, 10); // 10

console.log(sum); // 30
console.log(difference); // 10

オブジェクトリテラル

シンプルなユースケースの場合は、オブジェクトリテラルを使用して、静的メソッドとプロパティを持つオブジェクトを作成することができます。

const MathUtils = {
  add: (a: number, b: number): number => a + b,
  subtract: (a: number, b: number): number => a - b,
};

const sum = MathUtils.add(10, 20); // 30
const difference = MathUtils.subtract(20, 10); // 10

console.log(sum); // 30
console.log(difference); // 10