javascript - TypeScript 提示正确的 HTML5 Fullscreen API 方法

Question

this.video.exitFullscreen();

我收到此错误:

[ts] 属性“exitFullscreen”不存在于 输入“HTMLVideoElement”

这种方法确实存在，并且我对视频的引用是 100% 正确的，因为我在代码中多次使用了它。我该如何解决这个问题，以便 typescript 编译时不会出现此错误？

我找到了一个答案，建议实现这样的接口(interface):

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

但是如果我已经定义了两个接口(interface)(用于状态和 Prop )并且我的类已经在使用它们，我该如何使用这个接口(interface):

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

我无法在此类上使用第三个接口(interface)。我该如何解决这个问题？

Answer 1

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

你能尝试一下document.exitFullscreen()吗？而不是在 this.video 上调用 exitFullscreen。

正如您所指出的， typescript 不知道 moz 前缀函数，因此在项目中的任何位置添加此文件(您不必从它派生)应该消除 document.mozCancelFullScreen 的编译器错误

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