TypeScriptでのカスタムイベントの型定義とイベントハンドラーの作り方

// カスタムイベントの作成
const event = new CustomEvent('myCustomEvent', {
    detail: { message: 'Hello, Custom Event!' }
});

const element = document.getElementById('myElement');
element?.dispatchEvent(event);

// カスタムイベントに渡すデータの型を定義
interface MyCustomEventDetail {
    message: string;
    timestamp: number;
}

// 型定義に基づいてカスタムイベントを作成
const myCustomEvent: CustomEvent<MyCustomEventDetail> = new CustomEvent('myCustomEvent', {
    detail: {
        message: 'This is a custom event!',
        timestamp: Date.now()
    }
});

document.addEventListener('myCustomEvent', (event: CustomEvent<MyCustomEventDetail>) => {
    console.log(event.detail.message); // 型安全にメッセージを取得
    console.log(event.detail.timestamp); // タイムスタンプを取得
});

// カスタムイベントの型定義
interface MyCustomEventDetail {
    message: string;
    timestamp: number;
}

// イベントハンドラーの設定
const handleCustomEvent = (event: CustomEvent<MyCustomEventDetail>) => {
    console.log('カスタムイベントが発火しました:');
    console.log(`メッセージ: ${event.detail.message}`);
    console.log(`タイムスタンプ: ${event.detail.timestamp}`);
};

// DOM要素にイベントリスナーを追加
const element = document.getElementById('myElement');
element?.addEventListener('myCustomEvent', handleCustomEvent);

// カスタムイベントの作成と発火
const event = new CustomEvent<MyCustomEventDetail>('myCustomEvent', {
    detail: { message: 'Hello, World!', timestamp: Date.now() }
});
element?.dispatchEvent(event);

// 正しい型定義
interface MyCustomEventDetail {
    message: string;
    timestamp: number;
}

// カスタムイベントを作成
const event = new CustomEvent<MyCustomEventDetail>('myCustomEvent', {
    detail: {
        message: '正しいメッセージ',
        timestamp: Date.now()
    }
});

// イベントリスナーの追加
document.addEventListener('myCustomEvent', (event: CustomEvent<MyCustomEventDetail>) => {
    console.log(event.detail.message);
    console.log(event.detail.timestamp);
});

// 型が間違っているためエラーが発生
const event = new CustomEvent<MyCustomEventDetail>('myCustomEvent', {
    detail: {
        message: 123, // エラー: 'number' 型は 'string' 型に割り当てられません
        timestamp: Date.now()
    }
});

document.addEventListener('myCustomEvent', (event: CustomEvent<MyCustomEventDetail>) => {
    // 型チェックが有効なので、予期しないプロパティや型の誤りを防ぐ
    console.log(event.detail.message); // 正しいアクセス
    console.log(event.detail.nonExistentProperty); // エラー: プロパティが存在しないためコンパイルエラー
});

// カスタムイベントの作成
const myCustomEvent = new CustomEvent('dataProcessed', {
    detail: { status: 'success', processedData: [1, 2, 3] }
});

// カスタムイベントの発火
document.dispatchEvent(myCustomEvent);

// 子コンポーネントでカスタムイベントを発火
const formElement = document.getElementById('inputForm');
const submitEvent = new CustomEvent('formSubmitted', {
    detail: {
        formData: { name: 'John Doe', email: 'john@example.com' }
    }
});
formElement?.dispatchEvent(submitEvent);

// 親コンポーネントでイベントをリッスン
document.addEventListener('formSubmitted', (event: CustomEvent<{ formData: { name: string; email: string } }>) => {
    console.log('フォーム送信データ:', event.detail.formData);
});

// テーマ変更ボタンが押された際にカスタムイベントを発火
const themeButton = document.getElementById('themeButton');
themeButton?.addEventListener('click', () => {
    const themeChangeEvent = new CustomEvent('themeChanged', {
        detail: { theme: 'dark' }
    });
    document.dispatchEvent(themeChangeEvent);
});

// 他のコンポーネントでテーマ変更をリッスンして反映
document.addEventListener('themeChanged', (event: CustomEvent<{ theme: string }>) => {
    const newTheme = event.detail.theme;
    document.body.setAttribute('data-theme', newTheme);
    console.log(`テーマが${newTheme}に変更されました`);
});

// 非同期APIコールが完了したらカスタムイベントを発火
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        const dataLoadedEvent = new CustomEvent('dataLoaded', {
            detail: { data }
        });
        document.dispatchEvent(dataLoadedEvent);
    });

// データがロードされたことをリッスンしてUIを更新
document.addEventListener('dataLoaded', (event: CustomEvent<{ data: any }>) => {
    console.log('データがロードされました:', event.detail.data);
    // UI更新処理など
});

// モジュールAがカスタムイベントを発火
const moduleAEvent = new CustomEvent('moduleAAction', {
    detail: { value: 42 }
});
document.dispatchEvent(moduleAEvent);

// モジュールBがそのイベントをリッスン
document.addEventListener('moduleAAction', (event: CustomEvent<{ value: number }>) => {
    console.log('モジュールAからの値を受け取りました:', event.detail.value);
});

// カスタムイベントを作成し、バブリングを有効にする
const customEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Hello, bubbling event!' },
    bubbles: true // バブリングを有効にする
});

// 子要素でイベントを発火
const childElement = document.getElementById('child');
childElement?.dispatchEvent(customEvent);

// 親要素でイベントをリッスン
const parentElement = document.getElementById('parent');
parentElement?.addEventListener('myCustomEvent', (event: CustomEvent<{ message: string }>) => {
    console.log('親要素でイベントを受け取りました:', event.detail.message);
});

// 子要素でイベントを発火
const childElement = document.getElementById('child');
const customEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'バブリングテスト' },
    bubbles: true
});
childElement?.dispatchEvent(customEvent);

// 親要素でイベントキャプチャを使用してイベントをリッスン
parentElement?.addEventListener(
    'myCustomEvent',
    (event: CustomEvent<{ message: string }>) => {
        console.log('キャプチャフェーズでイベントを受け取りました:', event.detail.message);
    },
    { capture: true }
);

// イベント1: ユーザーのアクションをトリガー
const userActionEvent = new CustomEvent('userAction', {
    detail: { action: 'login', userId: 123 }
});

// イベント2: データがロードされた後の処理をトリガー
document.addEventListener('userAction', (event: CustomEvent<{ action: string; userId: number }>) => {
    console.log(`ユーザーアクション: ${event.detail.action}`);
    const dataLoadEvent = new CustomEvent('dataLoaded', {
        detail: { status: 'success', userId: event.detail.userId }
    });
    document.dispatchEvent(dataLoadEvent);
});

// イベント3: データロード完了後にUIを更新
document.addEventListener('dataLoaded', (event: CustomEvent<{ status: string; userId: number }>) => {
    console.log(`データロード状態: ${event.detail.status}, ユーザーID: ${event.detail.userId}`);
});

class EventDispatcher {
    static dispatch(eventName: string, detail: object) {
        const event = new CustomEvent(eventName, { detail });
        document.dispatchEvent(event);
    }

    static listen(eventName: string, callback: (event: CustomEvent) => void) {
        document.addEventListener(eventName, callback);
    }
}

// イベントを発火
EventDispatcher.dispatch('customEvent', { message: 'Hello World' });

// イベントをリッスン
EventDispatcher.listen('customEvent', (event: CustomEvent) => {
    console.log('カスタムイベントを受け取りました:', event.detail.message);
});

// 複雑なデータ構造を含むイベント
const complexDataEvent = new CustomEvent('complexDataEvent', {
    detail: {
        user: { id: 1, name: 'Alice' },
        settings: { theme: 'dark', notifications: true }
    }
});

// イベントリスナーでデータを処理
document.addEventListener('complexDataEvent', (event: CustomEvent<{ user: object; settings: object }>) => {
    const { user, settings } = event.detail;
    console.log('ユーザーデータ:', user);
    console.log('設定データ:', settings);
});

// モジュールAがカスタムイベントを発火
class ModuleA {
    static doSomething() {
        const event = new CustomEvent('moduleAEvent', { detail: { data: 'Action from Module A' } });
        document.dispatchEvent(event);
    }
}

// モジュールBがそのイベントをリッスン
class ModuleB {
    static init() {
        document.addEventListener('moduleAEvent', (event: CustomEvent<{ data: string }>) => {
            console.log('ModuleB received:', event.detail.data);
        });
    }
}

// モジュールAのアクションをトリガー
ModuleA.doSomething();
// モジュールBがイベントを受け取る
ModuleB.init();

// APIからデータを取得
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        const apiEvent = new CustomEvent('apiDataFetched', { detail: { data } });
        document.dispatchEvent(apiEvent);
    });

// データ取得完了後の処理
document.addEventListener('apiDataFetched', (event: CustomEvent<{ data: any }>) => {
    console.log('APIデータを処理:', event.detail.data);
    // 次のイベントを発火
    const processEvent = new CustomEvent('dataProcessed', { detail: { processed: true } });
    document.dispatchEvent(processEvent);
});

// データ処理完了後のUI更新
document.addEventListener('dataProcessed', (event: CustomEvent<{ processed: boolean }>) => {
    if (event.detail.processed) {
        console.log('データ処理が完了しました。UIを更新します。');
    }
});

npm install jest @types/jest ts-jest --save-dev

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

// カスタムイベントのテスト
test('カスタムイベントが発火される', () => {
    const mockCallback = jest.fn();  // モック関数を作成
    document.addEventListener('testEvent', mockCallback);

    const event = new CustomEvent('testEvent', {
        detail: { message: 'Hello, Jest!' }
    });

    document.dispatchEvent(event);  // イベントを発火

    // コールバックが呼び出されることを確認
    expect(mockCallback).toHaveBeenCalled();
    // イベントのdetailが正しいことを確認
    const dispatchedEvent = mockCallback.mock.calls[0][0] as CustomEvent;
    expect(dispatchedEvent.detail.message).toBe('Hello, Jest!');
});

test('カスタムイベントがバブリングされる', () => {
    const parentCallback = jest.fn();
    const childElement = document.createElement('div');
    const parentElement = document.createElement('div');

    parentElement.appendChild(childElement);
    document.body.appendChild(parentElement);

    parentElement.addEventListener('testEvent', parentCallback);

    const event = new CustomEvent('testEvent', {
        detail: { data: 'Bubbling Test' },
        bubbles: true  // バブリングを有効にする
    });

    childElement.dispatchEvent(event);  // 子要素からイベントを発火

    // 親要素でイベントがキャッチされたことを確認
    expect(parentCallback).toHaveBeenCalled();
});

test('非同期カスタムイベントが処理される', async () => {
    const mockCallback = jest.fn();

    document.addEventListener('asyncEvent', mockCallback);

    // 非同期関数内でカスタムイベントを発火
    const asyncFunction = async () => {
        return new Promise<void>((resolve) => {
            setTimeout(() => {
                const event = new CustomEvent('asyncEvent', {
                    detail: { result: 'Async Success' }
                });
                document.dispatchEvent(event);
                resolve();
            }, 1000);
        });
    };

    await asyncFunction();  // 非同期関数を実行

    // 非同期イベントが呼び出されたことを確認
    expect(mockCallback).toHaveBeenCalled();
    const dispatchedEvent = mockCallback.mock.calls[0][0] as CustomEvent;
    expect(dispatchedEvent.detail.result).toBe('Async Success');
});

test('バブリングなしのカスタムイベント', () => {
    const parentCallback = jest.fn();
    const childElement = document.createElement('div');
    const parentElement = document.createElement('div');

    parentElement.appendChild(childElement);
    document.body.appendChild(parentElement);

    parentElement.addEventListener('testEvent', parentCallback);

    const event = new CustomEvent('testEvent', {
        detail: { data: 'No Bubbling' },
        bubbles: false  // バブリング無効
    });

    childElement.dispatchEvent(event);

    // バブリングされないため、親要素のリスナーは呼ばれない
    expect(parentCallback).not.toHaveBeenCalled();
});