无法在不同浏览器的typescript中使用Element.requestFullscreen()

Question

我正试图在我的React Typescript项目中使用javascript全屏Api，以便在需要时以全屏模式显示div内容。我的代码如下，

var elem = document.getElementById("MyDiv");
if (elem.requestFullscreen) {
elem.requestFullscreen();
}

这在chrome中运行良好，但为了支持多个浏览器，我需要使用其他功能，如

if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}```
When I am trying to use these functions in typescript, it is giving me a compile-time error saying  "Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'".
Can anyone help me to solve this compile-time error, and use fullscreen API for all browsers?

Answer 1

根据MS，Typescript已从v3.1中删除了lib.d.ts中对供应商DOM API的支持。如果您的运行时保证这些API名称可用，他们建议在您自己的应用程序上添加类型，例如：

对于IE，创建文件dom.ie.d.ts:

interface Element {
msRequestFullscreen(): void;
// ...
}

Answer 2

在类似的情况下，我选择使用useRef来获取视频元素。然后在上面的例子中，你可以用元素来代替

if (yourElementRef.current.requestFullscreen) {
yourElement.current.requestFullscreen();
} 

这将从Typescript中删除警告。注意当前