1

私のコードについて文句を言うのをやめるには、typescript を取得する必要があります。ブラウザでは正常に動作しますが、フルスクリーン API はまだ公式ではないため、typescript の定義は最新ではありません。

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

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

lib.d.ts を見ると、次のことがわかります。

documentElement: HTMLElement;

したがって、documentElement は HTMLElement 型に設定されます。documentElement をオーバーライドするカスタム定義を追加してみました。私のカスタム定義:

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

Document のインターフェイスを拡張しようとしましたが、エラーが発生します

エラーは次のとおりです。

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

私のタイプスクリプトクラス

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

タイプスクリプトのコンパイルエラーを停止させる適切な方法は何ですか?

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

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


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

2 に答える 2

0

既存のインターフェースの既存のプロパティを上書きすることはできません。新しいものを追加するだけです。

MDN Using fullscreen modeとElement documentationに基づいて、次のものが必要です。

Element.requestFullscreen()

とに存在しlib.d.tsますlib.es6.d.ts。

あなたが行方不明msRequestFullscreenでmozRequestFullScreen、それらをに追加する必要がある場合Element:

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

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

document.documentElement.mozRequestFullScreen(); // no error
于 2016-07-13T21:43:17.930 に答える