如何讓打字稿停止抱怨不知道的功能？

Question

我正在使用Typescript作爲需要使用JavaScript全屏API的Web應用程序。全屏API尚未得到官方支持，因此您必須使用供應商前綴。這裏是我的代碼的基礎上，將樣品從MDN：

function toggleFullScreen(element: JQuery) { 
    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(); 
     } 
    } 
} 

然而，在我的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'. 

當然打字本可以」我知道這些函數存在，但我也不想重新聲明文檔爲any只是爲了擺脫這些錯誤，因爲那樣我就會失去所有其他類型的提示。

這裏有什麼解決方案？如何讓TypeScript停止抱怨，但保留儘可能多的類型註釋？

Answer 1

簡單地說，您可以將這些項目添加到Document界面，錯誤將消失。

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; 
} 

這將防止它們被誤用。

對於靜態屬性，你可能只需要做出型動態，在下面的例子中的重要組成部分，是Element類型的斷言，即(<any>Element)：

fs.webkitRequestFullscreen((<any>Element).ALLOW_KEYBOARD_INPUT); 

Answer 2

史蒂夫芬頓的回答非常好，在長此以往，應該是做的。記住類型是文檔，並會幫助下一個開發者。

壞，但如果你希望它是

純粹作爲一個思想實驗，你可以創建一個局部變量影着全球一個和明確類型它是任何只有一次證明了打字稿是寬容：

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

而對於更看中酮（抓鬥從外範圍內）：

var Element_Copy=Element; 
function toggleFullScreen(element: JQuery) { 
    var Element:any = Element_Copy; 
    Element.ShootMyself = true; 
} 

完整示例：

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(); 
     } 
    } 
} 

Answer 3

我有同樣的問題。只需使用「方括號」符號來解決它。

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

Answer 4

這是不推薦但另一種解決方案，以阻止編譯器抱怨：

const document: any = window.document;