Typoskript: Überschreiben/Erweitern von Lib.d.ts mit bereits vorhandenem Identifier

Question

Ich brauche ein Typoskript, um nicht mehr über meinen Code zu klagen. Es läuft gut im Browser, aber Vollbild-API sind noch nicht offiziell, so dass die Typoskript-Definitionen nicht auf dem neuesten Stand sind.

Ich rufe document.documentElement.msRequestFullscreen auf. Dies bewirkt, dass Typ-Fehler:

Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. 

Upon bei lib.d.ts suchen, finde ich diese:

documentElement: HTMLElement; 

So document gesetzt Htmlelement einzugeben. Ich habe versucht, eine benutzerdefinierte Definition hinzuzufügen, um documentElement zu überschreiben. My Custom Definition:

// Extend Document Typings 
interface Document { 
    msExitFullscreen: any; 
    mozCancelFullScreen: any; 
    documentElement: { 
     msRequestFullscreen: any; 
     mozRequestFullScreen: any; 
    } 
} 

Ich habe versucht, die Schnittstelle für Dokument erstreckt, aber es gibt Fehler

Fehler ist:

lib.d.ts:5704:5 
Duplicate identifier 'documentElement'. 

Meine Typoskript Klasse

export class ToggleFullScreen { 
    viewFullScreenTriggerID: string; 
    viewFullScreenClass: string; 
    cancelFullScreenClass: string; 
    viewFullscreenElem: any; 
    activeIcon: string; 
    notFullscreenIcon: string; 
    isFullscreenIcon: string 


    constructor() { 
     this.viewFullScreenTriggerID = "#fullScreenTrigger"; 
     this.viewFullScreenClass = "not-fullscreen"; 
     this.cancelFullScreenClass = "is-fullscreen"; 
     this.notFullscreenIcon = "/assets/icon/fullscreen-enter.svg"; 
     this.isFullscreenIcon = "/assets/icon/fullscreen-exit.svg"; 
     this.activeIcon = this.notFullscreenIcon; 
    } 

    toggleFullScreen() { 
     this.viewFullscreenElem = document.querySelector(this.viewFullScreenTriggerID); 

     if (this.viewFullscreenElem.classList.contains(this.viewFullScreenClass)) { 

     var docElm = document.documentElement; 
     if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
     } else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
     } else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
     } else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
     } 

     this.viewFullscreenElem.classList.toggle(this.viewFullScreenClass); 
     this.viewFullscreenElem.classList.toggle(this.cancelFullScreenClass); 
     this.activeIcon = this.isFullscreenIcon; 

     } 

     else if (this.viewFullscreenElem.classList.contains(this.cancelFullScreenClass)) { 
     if (document.exitFullscreen) { 
      document.exitFullscreen(); 
     } else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
     } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
     } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
     } 

     this.viewFullscreenElem.classList.toggle(this.viewFullScreenClass); 
     this.viewFullscreenElem.classList.toggle(this.cancelFullScreenClass); 
     this.activeIcon = this.notFullscreenIcon; 
     } 
    } 
} 

Was die richtige ist Möglichkeit, Fehler beim Kompilieren von Typoskripten zu stoppen?

UPDATE: Ich habe einen Workaround gefunden. Anstatt zu versuchen, documentElement zu überschreiben, das auf HTMLElement festgelegt ist, habe ich HTMLElement erweitert und die fehlenden Eigenschaften hinzugefügt.

// Extend Document Typings 
interface Document { 
    msExitFullscreen: any; 
    mozCancelFullScreen: any; 
} 


interface HTMLElement { 
    msRequestFullscreen(): void; 
    mozRequestFullScreen(): void; 
} 

Answer 1

Sie können vorhandene Eigenschaften einer vorhandenen Schnittstelle nicht überschreiben, sondern nur neue hinzufügen.

Basierend auf dem MDN Using fullscreen mode und Element documentation was Sie benötigen:

Element.requestFullscreen() 

, die die in lib.d.ts und lib.es6.d.ts existiert.

Wenn Sie msRequestFullscreen und mozRequestFullScreen dann müssen Sie fehlt ihnen Element hinzuzufügen:

interface Document { 
    msExitFullscreen: any; 
    mozCancelFullScreen: any; 
} 

interface Element { 
    msRequestFullscreen(): void; 
    mozRequestFullScreen(): void; 
} 

document.documentElement.mozRequestFullScreen(); // no error 

Answer 2

ich neuere Version von Typoskript mit bin und ich das gleiche Problem konfrontiert.

Ich versuchte die obige Lösung und es hat nicht funktioniert - es schien, dass ich die vorhandene Schnittstelle maskierte.

der Lage sein, richtig beide Schnittstellen zu erweitern, ich global eine declare verwenden musste:

declare global { 
    interface Document { 
     msExitFullscreen: any; 
     mozCancelFullScreen: any; 
    } 


    interface HTMLElement { 
     msRequestFullscreen: any; 
     mozRequestFullScreen: any; 
    } 
} 

tun so, ich war in der Lage und dieser Code wie verwenden, um korrekt zu kompilieren:

fullScreenClick(e): any { 
    var element = document.documentElement; 
    if (!$('body').hasClass("full-screen")) { 
     $('body').addClass("full-screen"); 
     $('#fullscreen-toggler').addClass("active"); 
     if (element.requestFullscreen) { 
      element.requestFullscreen(); 
     } else if (element.mozRequestFullScreen()) { 
      element.mozRequestFullScreen(); 
     } else if (element.webkitRequestFullscreen) { 
      element.webkitRequestFullscreen(); 
     } else if (element.msRequestFullscreen) { 
      element.msRequestFullscreen(); 
     } 
    } else { 
     $('body').removeClass("full-screen"); 
     $('#fullscreen-toggler').removeClass("active"); 
     if (document.exitFullscreen) { 
      document.exitFullscreen(); 
     } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
     } else if (document.webkitExitFullscreen) { 
      document.webkitExitFullscreen(); 
     } 
    } 
}