Using TypeScript to Trigger Events in Three.js

Question

Using TypeScript to Trigger Events in Three.js

After recently diving into Typescript, I encountered an issue when using EventEmitter from the ThreeJS library.

Whenever I attempt to trigger an event:

const event: THREE.EventDispatcher = new THREE.EventDispatcher();
event.addEventListener('test', () => console.log(1));
event.dispatchEvent({ type: 'test' }); // <-- error

An error pops up, stating:

TS2345: Argument of type '{ type: string; }' is not assignable to parameter of type 'never'.

To work around this issue, I tried the following approach:

const event: THREE.EventDispatcher = new THREE.EventDispatcher();
event.addEventListener('test', () => console.log(1));
event.dispatchEvent<any>({ type: 'test' }); // <-- ignored error by any

Despite finding a temporary fix with 'any', it doesn't feel like the optimal solution. Could someone demonstrate the correct method along with explanations?

javascript typescript

Answer 1

Answer №1

Within the source code of @types/three, you will find unit tests that serve as useful examples for understanding usage.

I adapted a test from the EventDispatcher module, which can be viewed here:

interface TestEvent {
    test: { message: string };
}

const event = new THREE.EventDispatcher<TestEvent>();
event.addEventListener('test', () => console.log(1));
event.dispatchEvent({ type: 'test', message: "hello world" });

If you desire a detailed explanation (note: I am not an expert in TypeScript):

In examining the type definitions (e.g., by navigating to the definition in VSCode or reviewing the source code), these are the pertinent types:

export interface BaseEvent<TEventType extends string = string> {
    readonly type: TEventType;
}

export class EventDispatcher<TEventMap extends {} = {}> {
    // ...

    dispatchEvent<T extends Extract<keyof TEventMap, string>>(event: BaseEvent<T> & TEventMap[T]): void;
}

This is how the example code functions:

// Declares TEventMap type as { test: { message: string } }
const event = new THREE.EventDispatcher<{ test: { message: string } }>();

// This results in dispatchEvent<"test"> because the key of TEventMap is extracted
// parameter type becomes: event: BaseEvent<"test"> & TEventMap["test"]
// which simplifies to: { type: "test"; } & { message: string; }
// intersection (&) yields: { type: "test"; message: string; } 
event.dispatchEvent({ type: 'test', message: "hello world" });

Answer 2

Within the source code of @types/three, you will find unit tests that serve as useful examples for understanding usage.

I adapted a test from the EventDispatcher module, which can be viewed here:

interface TestEvent {
    test: { message: string };
}

const event = new THREE.EventDispatcher<TestEvent>();
event.addEventListener('test', () => console.log(1));
event.dispatchEvent({ type: 'test', message: "hello world" });

If you desire a detailed explanation (note: I am not an expert in TypeScript):

In examining the type definitions (e.g., by navigating to the definition in VSCode or reviewing the source code), these are the pertinent types:

export interface BaseEvent<TEventType extends string = string> {
    readonly type: TEventType;
}

export class EventDispatcher<TEventMap extends {} = {}> {
    // ...

    dispatchEvent<T extends Extract<keyof TEventMap, string>>(event: BaseEvent<T> & TEventMap[T]): void;
}

This is how the example code functions:

// Declares TEventMap type as { test: { message: string } }
const event = new THREE.EventDispatcher<{ test: { message: string } }>();

// This results in dispatchEvent<"test"> because the key of TEventMap is extracted
// parameter type becomes: event: BaseEvent<"test"> & TEventMap["test"]
// which simplifies to: { type: "test"; } & { message: string; }
// intersection (&) yields: { type: "test"; message: string; } 
event.dispatchEvent({ type: 'test', message: "hello world" });

Using TypeScript to Trigger Events in Three.js

Answer №1

Similar questions

What's the issue with the Global Var in JavaScript (JQuery)?

Use Selenium to close the Flipkart tab, open a pop-up window, and navigate back to the

When attempting to trigger an error, the unit test will fail to pass

Load a 3D object or model using three.js and then make modifications to its individual components

Add navigation dots to the slider in order to align them with the specified div element

Retrieving information stored in a FormBuilder through the HTML

The selected value is not displayed in the Material UI select component

Basic asynchronous JavaScript and XML (AJAX) call

Select a single option from the group to include in the array

Instructions on utilizing API call ( jssor_slider1.$GoTo(N))

Having trouble utilizing yarn to import Mapbox into TypeScript

Numbering each numeral

Creating a Type in Typescript that Inherits Keys from Another Type

The process of flattening an array in Zustand: a comprehensive guide

Deleting database information using Jquery when a div is clicked

The specified dependency, * core-js/fn/symbol, could not be located

Looping through a JSON array and encoding it using the `

The initial io.emit message seems to always be delayed or lost in transmission

Troubleshooting: The issue of importing Angular 2 service in @NgModule

Infusing JavaScript with vibrant images