Javascript 如何让typescript停止抱怨它没有的函数'；你不知道吗？

我正在为需要使用JavaScript全屏API的web应用程序使用Typescript。官方还不支持全屏API，因此您必须使用供应商前缀。以下是我的代码，基于以下示例：

然而，在我的IDE（Visual Studio，但这在任何地方都会发生）中，我会遇到如下错误：

The property 'fullscreenElement' does not exist on value of type 'Document'.
The property 'mozFullScreenElement' does not exist on value of type 'Document'.
The property 'webkitFullscreenElement' does not exist on value of type 'Document'.  

当然，TypeScript无法知道这些函数是否存在，但我也不想仅仅为了消除这些错误而将文档重新声明为

any

，因为这样我将丢失所有其他类型提示

---

这里的解决方案是什么？如何让TypeScript停止抱怨，但保留尽可能多的类型批注？

简单地说，您可以将这些项目添加到

文档

界面，错误就会消失

interface Document {
    exitFullscreen: any;
    mozCancelFullScreen: any;
    webkitExitFullscreen: any;
    fullscreenElement: any;
    mozFullScreenElement: any;
    webkitFullscreenElement: any;
}

您可以为每种类型添加完整的类型信息，即使是简单的：

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

这将防止它们被滥用

对于静态属性，您可能只需要将类型设置为动态，下面示例中的重要部分是

元素

上的类型断言，即

（元素）

：

fs.webkitRequestFullscreen（（元素）。允许键盘输入）；

史蒂夫·芬顿的回答非常好，从长远来看，这是你应该做的。请记住，类型是文档，将帮助下一个开发人员

不好，但如果您希望，证明typescript是允许的 纯粹作为一个思维实验，您可以创建一个局部变量来隐藏全局变量，并只显式键入一次：

function toggleFullScreen(element: JQuery) {
    var document:any = window.document;
    document.AnythingCanHappen = 123; // No error 
}

对于更花哨的（从外部范围抓取）：

完整示例：

var Element_Copy=Element;                         // Magic
function toggleFullScreen(element: JQuery) {
    var document:any = window.document;           // Magic
    var Element:any = Element_Copy;               // Magic
    var fs = element[0];
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
        if (fs.requestFullscreen) {
            fs.requestFullscreen();
        } else if (fs.msRequestFullscreen) {
            fs.msRequestFullscreen();
        } else if (fs.mozRequestFullScreen) {
            fs.mozRequestFullScreen();
        } else if (fs.webkitRequestFullscreen) {
            fs.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
}

---

我也有同样的问题。只需使用“方括号”符号即可解决此问题

 if (document['exitFullscreen']) {
    document['exitFullscreen']();
 } else if (document['webkitExitFullscreen']) {
    document['webkitExitFullscreen']();
 } else if (document['mozCancelFullScreen']) {
    document['mozCancelFullScreen']();
 } else if (document['msExitFullscreen']) {
    document['msExitFullscreen']();
 }

---

这不是建议的，而是另一种停止编译器抱怨的解决方案：

const document: any = window.document;

---

我今天遇到了同样的问题，我在这里看到的解决方案在angular 7项目中没有完全起作用

以下是我们为使其发挥作用所做的工作。 我们首先为上面提到的文档创建了一个接口。（在我们的案例中，我们只需要“fullscreenElement”，但您可以添加任何您喜欢的内容）

将其导入到我们的组件中，但没有实现它

import { Document } from '../interfaces/document';

然后，您可以将

document

转换为我们上面创建的扩展类型，而不是使用

document.fullscreenElement

，如下所示：

(document as Document).fullscreenElement

@HostListener('document:fullscreenchange', ['$event']) onfullscreenchange(e) {
  if ((document as Document).fullscreenElement) {
    this.isFullscreen = true;
  } else {
    this.isFullscreen = false;
  }
}

这使我们能够制作一个全屏变化检测器，如下所示：

(document as Document).fullscreenElement

@HostListener('document:fullscreenchange', ['$event']) onfullscreenchange(e) {
  if ((document as Document).fullscreenElement) {
    this.isFullscreen = true;
  } else {
    this.isFullscreen = false;
  }
}

Typescript现在将接受这些新定义的属性。

在对的回答中，我们为这些类型添加了一些详细信息，并在带有导入/导出的常规Typescript模块中声明了它们。这意味着您还必须声明全局命名空间：

declare global {
  interface Document {
    mozCancelFullScreen?: () => Promise<void>;
    msExitFullscreen?: () => Promise<void>;
    webkitExitFullscreen?: () => Promise<void>;
    mozFullScreenElement?: Element;
    msFullscreenElement?: Element;
    webkitFullscreenElement?: Element;
  }

  interface HTMLElement {
    msRequestFullscreen?: () => Promise<void>;
    mozRequestFullscreen?: () => Promise<void>;
    webkitRequestFullscreen?: () => Promise<void>;
  }
}

声明全局{
接口文档{
全屏？：（）=>承诺；
MSEXIT全屏？：（）=>承诺；
webkitExitFullscreen？：（）=>承诺；
mozFullScreenElement？：元素；
msFullscreenElement？：元素；
webkitFullscreenElement？：元素；
}
接口HTMLElement{
msRequestFullscreen？：（）=>承诺；
mozRequestFullscreen？：（）=>承诺；
webkitRequestFullscreen？：（）=>承诺；
}
}

在访问属性和函数之前，您可以强制转换为“任意”

例如：

if ((<any> canvas).mozRequestFullScreen) {
    (<any> canvas).mozRequestFullScreen();
}

if（（画布）.mozRequestFullScreen）{
（canvas.mozRequestFullScreen（）；
}

是否可以创建一个？（或者在这种特定情况下，找到其他人已经创建的代码——如果没有，则共享您创建的代码……）为什么不建议使用此代码？我已将这些代码添加到src文件夹下的global.d.ts中，但是，它仍然会继续给出错误。

declare global {
  interface Document {
    mozCancelFullScreen?: () => Promise<void>;
    msExitFullscreen?: () => Promise<void>;
    webkitExitFullscreen?: () => Promise<void>;
    mozFullScreenElement?: Element;
    msFullscreenElement?: Element;
    webkitFullscreenElement?: Element;
  }

  interface HTMLElement {
    msRequestFullscreen?: () => Promise<void>;
    mozRequestFullscreen?: () => Promise<void>;
    webkitRequestFullscreen?: () => Promise<void>;
  }
}

if ((<any> canvas).mozRequestFullScreen) {
    (<any> canvas).mozRequestFullScreen();
}