如何在TypeScript中正确使用ThreeJS的EventDispatcher派发事件

问题根源在于THREE.EventDispatcher是泛型类，未指定事件类型时，泛型参数默认值为never，导致dispatchEvent的参数类型被推断为never，传入{ type: 'test' }自然会触发类型不匹配错误。

正确步骤： #

1. 定义自定义事件类型
   用类型别名或接口明确你要使用的事件及其结构，每个事件必须包含type属性（对应事件名称）：

   type CustomEvents = {
     test: { type: 'test' };
     // 可扩展更多事件，例如：
     // resize: { type: 'resize'; width: number; height: number };
   };
   

2. 指定泛型参数实例化EventDispatcher
   创建实例时传入自定义事件类型，让TypeScript进行类型约束：

   const eventDispatcher = new THREE.EventDispatcher<CustomEvents>();
   

3. 正常使用事件监听与派发
   此时TypeScript会自动校验事件名称和参数结构，不会再报错：

   eventDispatcher.addEventListener('test', () => console.log(1));
   eventDispatcher.dispatchEvent({ type: 'test' }); // 正常运行
   

扩展说明： #

如果需要在事件中传递额外数据，只需在CustomEvents中对应事件的结构里添加字段即可，TypeScript会自动推导监听回调的参数类型：

type CustomEvents = {
  test: { type: 'test' };
  resize: { type: 'resize'; width: number; height: number };
};

// 监听resize事件，回调参数自动获得类型提示
eventDispatcher.addEventListener('resize', (event) => {
  console.log('窗口尺寸更新:', event.width, event.height);
});

// 派发带参数的resize事件
eventDispatcher.dispatchEvent({ type: 'resize', width: 1920, height: 1080 });

这种方式既符合TypeScript的类型安全要求，又避免了使用any带来的类型隐患，是Three.js结合TypeScript使用EventDispatcher的标准做法。

内容的提问来源于stack exchange，提问作者beyondray