TypeScript抱怨正确的HTML5全屏API方法

Question

this.video.exitFullscreen（）;

我收到此错误：

[ts]类型“ HTMLVideoElement”上不存在属性“ exitFullscreen”

这个方法确实存在，我对视频的引用是100％正确的，因为我在代码中使用了很多次。 我该如何解决这个问题，以便打字稿可以编译而不会给我这个错误？

我找到了一个建议实现这样的接口的答案：

interface Document {
    exitFullscreen: () => void;
    mozCancelFullScreen: () => void;
    webkitExitFullscreen: () => void;
    fullscreenElement: () => void;
    mozFullScreenElement: () => void;
    webkitFullscreenElement: () => void;
}

但是如果我已经定义了两个接口（用于状态和道具）并且我的班级已经在使用它们，那么该如何使用该接口：

class Player extends React.Component<IProps, IState> { ... }

我不能在此类上使用第三个接口。 我该如何解决这个问题？

Answer 1

据我所知，您正在寻找document.exitFullscreen ，因为根据MDN， HTMLVideoElement.exitFullscreen不存在。

您可以尝试document.exitFullscreen()吗？ 而不是在exitFullscreen上调用this.video 。

正如您所指出的，打字稿不知道moz前缀函数，因此将此文件添加到项目中的任何位置（不必从其派生）都应消除document.mozCancelFullScreen编译器错误。

interface Document {
    mozCancelFullScreen: () => void;
    mozFullScreenElement: Element;
}

Answer 2

您可以使用类型断言来向编译器提供提示：

(this.video as Document).exitFullscreen();