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

【问题标题】：TypeScript complaining about a proper HTML5 Fullscreen API methodTypeScript 抱怨正确的 HTML5 全屏 API 方法
【发布时间】：2017-11-01 11:14:48
【问题描述】：

this.video.exitFullscreen();

我收到此错误：

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs typescript html5-video

【解决方案1】：

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

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

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

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

【讨论】：

我设法在没有实现该接口的情况下部分处理文档，但我只能使用 .exitFullscreen() 和 .webkiteExitFullscreen() 方法。 mozCancelFullScreen() 和其他不起作用（使用打字稿时）。
是的，exitFullscreen 似乎还没有被浏览器完全实现，所以我会小心在生产环境中使用它。

【解决方案2】：

你可以使用类型断言给编译器一个提示：

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

【讨论】：

你能解释一下你的解决方案吗？
你会给编译器一个完全不正确的提示，this.video 是 HTMLVideoElement - 将其转换为 Document 不会改变这一点，因为类型不兼容全部。这似乎是一个非常懒惰的“以尽可能少的努力使错误消失”的解决方案，实际上并不能解决问题。编译器不会抱怨，但 exitFullscreen 仍然不存在于该对象上。
你是绝对正确的。这是一个粗略的“请编译，以便我今天可以完成一些事情”破解打字强制，并且可能只能在包含问题中包含的Document 接口的文件中工作，因为它添加了更正确的道具来自HTMLVideoElement。