React SyntheticEvent 中的“元素”类型上不存在属性“播放”答案

【问题标题】：Property 'play' does not exist on type 'Element' in React SyntheticEventReact SyntheticEvent 中的“元素”类型上不存在属性“播放”
【发布时间】：2021-05-21 16:01:32
【问题描述】：

我有一个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 声明的另一个错误，即 -

类型“元素”缺少类型中的以下属性 'HTMLVideoElement'：高度、playsInline、poster、videoHeight 和 158 更多。

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

【问题讨论】：

标签： reactjs typescript dom html5-video

【解决方案1】：

由于 typescript 无法在编译时告知这是安全的，因此您需要使用 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();
}

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

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

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');
   }
}

【讨论】：