Wie bekomme ich Typoskript, um nicht mehr über Funktionen zu klagen, von denen es nichts weiß?

Question

Ich verwende Typescript für eine Webanwendung, die die JavaScript-Vollbild-API verwenden muss. Die Vollbild-API wird noch nicht offiziell unterstützt, daher müssen Sie Hersteller-Präfixe verwenden. Hier ist mein Code, basierend auf der Probe aus 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(); 
     } 
    } 
} 

jedoch in meiner IDE (Visual Studio, aber das würde passieren, überall), erhalte ich Fehler wie:

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'. 

Natürlich Typoskript kann‘ Ich weiß, dass diese Funktionen existieren, aber ich möchte das Dokument auch nicht als any deklarieren, nur um diese Fehler loszuwerden, denn dann verliere ich alle anderen Typhinweise.

Was ist die Lösung hier? Wie kann ich mit TypeScript aufhören, mich zu beschweren, aber so viele Typanmerkungen wie möglich behalten?

Answer 1

Simplistisch könnten Sie diese Elemente zur Document Schnittstelle hinzufügen und die Fehler würden weggehen.

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

konnten Sie voll für jeden dieser Typinformationen hinzufügen, auch die einfache:

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

Dies würde verhindern, dass sie falsch eingesetzt werden.

Für statische Eigenschaften, können Sie nur die dynamische vornehmen müssen, der wichtige Teil im Beispiel unten ist die Art Behauptung auf Element, dh (<any>Element):

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

Answer 2

Steve Fentons Antwort ist ausgezeichnet und in der langer Lauf das ist, was Sie tun sollten. Remember Typen sind Dokumentation und helfen dem nächsten Entwickler.

Bad aber das Typoskript beweisen ist permissive, wenn Sie es

Rein als Gedankenexperiment sein wollen, können Sie eine lokale Variable erstellen, die global und explizit Typ Schatten es nur jede einmal zu sein :

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

Und für mehr Phantasie diejenigen (Greifer von einem äußeren Umfang):

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

Komplettes Beispiel:

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

Ich habe das gleiche Problem. Verwenden Sie einfach "Square Klammer" -Notation, um es zu lösen.

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

Dies ist nicht empfohlen, aber eine andere Lösung des Compilers Jammern zu stoppen:

const document: any = window.document;