Typescript：既存の識別子を使ってLib.d.tsを上書き/拡張する

Question

私のコードについて不平を言うのを防ぐためにtypescriptを取得する必要があります。それはブラウザで正常に動作しますが、フルスクリーンのapiは公式ではないので、タイスクリプトの定義は最新ではありません。

私はdocument.documentElement.msRequestFullscreenを呼び出しています。これは、型エラーが発生します。

lib.d.tsを見ていたら

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

、私はこれを見つける：

documentElement: HTMLElement; 

そうにdocumentElementはのHTMLElementを入力するように設定されています。私はdocumentElementをオーバーライドするカスタム定義を追加しようとしました。マイカスタム定義：

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

私はドキュメントのためのインターフェイスを拡張しようとしたが、それは

エラーがあるエラーを与える：

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

マイtypescriptですクラスが適切である何

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

typescriptのコンパイルエラーを止めるには？

更新日：回避策が見つかりました。 HTMLElement型に設定されているdocumentElementをオーバーライドする代わりに、HTMLElementを拡張し、欠落していたプロパティを追加しました。

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


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

Answer 1

あなただけの新しいものを追加し、既存のインターフェイスの既存のプロパティをオーバーライドすることはできません。あなたが持っている必要がありMDN Using fullscreen modeとElement documentationに基づいて

：

lib.d.tsと lib.es6.d.tsに存在

Element.requestFullscreen() 

。

あなたはmsRequestFullscreenとmozRequestFullScreenが欠落している場合、あなたはElementにそれらを追加する必要があります。

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

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

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

Answer 2

私は活字体の新しいバージョンを使用していると私は同じ問題に直面しました。

私は上記の解決策を試してみましたが、うまくいきませんでした。私は既存のインターフェースを隠しているようでした。

は正しく両方のインターフェイスを拡張することができるように、私はグローバル宣言を使用していた：

そう

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


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

、私は正しくこのようなコードをコンパイルして使用することができました：

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