属性"play"在 React SyntheticEvent 中的类型"Element"上不存在

Question

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

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

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

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

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

类型"Element"在类型中缺少以下属性"HTMLVideoElement"：高度，playsInline，海报，视频高度，和158更多

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

Answer 1

由于typescript在编译时无法告知这是安全的，因此需要使用类型断言。

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，但相信我，它是"。请注意，这样做是在告诉打字稿不要检查你的作品。如果它不是一个视频元素，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');
}
}