属性 'play' 在 React SyntheticEvent 类型 'Element' 上不存在

Question

我在按钮上附加了一个 onClick 事件，当它被触发时，我需要获取按钮的 nextElementSibling （这是一个视频元素），然后需要调用播放方法。下面是 onClick 处理程序 -

const handleVideoEvent = (e: SyntheticEvent<HTMLButtonElement>) => {
        e.currentTarget.parentElement.nextElementSibling.play();
}

现在，我知道打字稿编译器不知道兄弟元素的类型，所以为了让它知道我尝试使用下面的代码 -

const handleVideoEvent = (e: SyntheticEvent<HTMLButtonElement>) => {
            const videoElement: HTMLVideoElement = e.currentTarget.parentElement.previousElementSibling;
            videoElement.play();
 }

但这显示了 videoElement 声明的另一个错误，即 -

Type 'Element' is missing the following properties from type 'HTMLVideoElement': height, playsInline, poster, videoHeight, and 158 more.

我是打字稿的新手，任何帮助将不胜感激。

Answer 1

由于打字稿无法在编译时判断这是安全的，因此您需要使用 type assertion.

const handleVideoEvent = (e: SyntheticEvent<HTMLButtonElement>) => {
   (e.currentTarget.parentElement.nextElementSibling as HTMLVideoElement).play();
}

// or:
const handleVideoEvent = (e: SyntheticEvent<HTMLButtonElement>) => {
   const videoElement = e.currentTarget.parentElement.nextElementSibling as HTMLVideoElement;
   videoElement.play();
}

这告诉打字稿“我知道这看起来不是 HTMLVideoElement，但相信我，它是”。请注意，这样做是在告诉打字稿不要检查您的工作。如果结果不是视频元素，打字稿无法指出这一点，您可能会在运行时遇到异常。

如果您想保持类型安全，另一种选择是添加代码以验证它是视频元素。从您的角度来看，这可能是一项不必要的检查：

const handleVideoEvent = (e: SyntheticEvent<HTMLButtonElement>) => {
   const element = e.currentTarget.parentElement.nextElementSibling;
   if (element instanceof HTMLVideoElement) {
     // Inside this if statement, typescript knows it must be a video element
     element.play();
   } else {
     console.error('uh oh');
   }
}

属性 'play' 在 React SyntheticEvent 类型 'Element' 上不存在

Property 'play' does not exist on type 'Element' in React SyntheticEvent

reactjs

typescript

dom

html5-video