TypeScriptにおけるイベント駆動型プログラミング：インターフェース、デコレータ、その他のテクニック

2024-05-21

TypeScriptにおけるクラスのイベントサポート

TypeScriptでは、以下の2つの主要な方法でクラスでイベントをサポートすることができます。

インターフェース: イベントを定義するインターフェースを作成することができます。このインターフェースには、イベント名とイベント引数の型を定義するプロパティが含まれます。クラスは、このインターフェースを実装することで、イベントをサポートすることができます。

interface ButtonEvent {
  type: string; // "click" | "hover" など
}

class Button {
  private onClickListeners: ((event: ButtonEvent) => void)[] = [];

  addEventListener(type: string, listener: (event: ButtonEvent) => void) {
    if (type === "click") {
      this.onClickListeners.push(listener);
    }
  }

  removeEventListener(type: string, listener: (event: ButtonEvent) => void) {
    if (type === "click") {
      this.onClickListeners = this.onClickListeners.filter(l => l !== listener);
    }
  }

  click() {
    const event: ButtonEvent = { type: "click" };
    this.onClickListeners.forEach(listener => listener(event));
  }
}

デコレータ: イベントハンドラをクラスのメソッドとして定義し、デコレータを使用してイベントと関連付けることができます。

class Button {
  @click
  click() {
    console.log("ボタンがクリックされました。");
  }
}

function click(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  descriptor.value = function (...args: any[]) {
    this.dispatchEvent(new CustomEvent(propertyKey, { detail: args }));
    return descriptor.value.apply(this, args);
  };
}

この例では、@clickデコレータは、clickメソッドがclickイベントを発行することを示します。

補足:

TypeScriptには、イベントを発行および処理するための組み込みのユーティリティはありません。
多くのライブラリとフレームワークは、独自のイベントシステムを提供しています。
イベントの使用方法については、使用するライブラリまたはフレームワークのドキュメントを参照してください。

TypeScriptクラスのイベントサポート - サンプルコード

インターフェースを使用したイベントサポート

この例では、Buttonクラスがclickイベントを発行する方法を示します。

interface ButtonEvent {
  type: string; // "click"
}

class Button {
  private onClickListeners: ((event: ButtonEvent) => void)[] = [];

  addEventListener(listener: (event: ButtonEvent) => void) {
    this.onClickListeners.push(listener);
  }

  removeEventListener(listener: (event: ButtonEvent) => void) {
    this.onClickListeners = this.onClickListeners.filter(l => l !== listener);
  }

  click() {
    const event: ButtonEvent = { type: "click" };
    this.onClickListeners.forEach(listener => listener(event));
  }
}

const button = new Button();

button.addEventListener((event) => {
  console.log("ボタンがクリックされました！");
});

button.click(); // ボタンがクリックされると、イベントハンドラが呼び出されます。

class Button {
  @click
  click() {
    console.log("ボタンがクリックされました。");
    this.dispatchEvent(new CustomEvent("click"));
  }
}

function click(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  descriptor.value = function (...args: any[]) {
    this.dispatchEvent(new CustomEvent(propertyKey, { detail: args }));
    return descriptor.value.apply(this, args);
  };
}

const button = new Button();

button.addEventListener("click", () => {
  console.log("デコレータを使用したイベントハンドラが呼び出されました。");
});

button.click(); // ボタンがクリックされると、イベントハンドラが呼び出されます。