在 TypeScript 和 react-three-fiber (@react-three/fiber) 中无法识别 ThreeEvent 和 WheelEvent

Question

我有一个带有onWheel 侦听器的基本网格框，我想将鼠标事件数据传递给处理函数。然而，TS 抛出了一系列不同的错误，并且似乎永远无法识别ThreeEvent 或WheelEvent，无论我如何尝试使用它们。

在屏幕截图 1 中，您可以看到在 onWheel 属性中，TS 推断出 ThreeEvent<WheelEvent> 是事件类型。然而，当我尝试在我的处理函数中键入事件时，我收到一条错误消息，提示 three.js 没有导出成员 ThreeEvent（屏幕截图 2）。

我尝试通过命名导入（即import {ThreeEvent/WheelEvent} from "three";，并使用THREE.ThreeEvent 语法在react-three-fiber docs 上的示例中使用。此外，在此行上方，我成功输入了useRef像这样：const boxRef = useRef<THREE.Mesh>();

我的 tsconfig 是 create-react-app 模板中的基本配置，我的版本如下：

"dependencies": {
    "@react-three/fiber": "^7.0.19",
    "three": "^0.135.0",
    "typescript": "^4.1.2"
}
"devDependencies": {
    "@types/three": "^0.134.0"
}

Answer 1

你应该安装 typescript 的类型。

npm install --save @types/three

之后类型应该可用。

您的导入有问题，必须从“@react-three/fiber”导入 ThreeEvent，从“react”导入 WheelEvent。

import { WheelEvent } from 'react';
import { ThreeEvent } from '@react-three/fiber';