Typescript : 기존 식별자를 사용하여 Lib.d.ts 재정의/확장

Question

내 코드에 대해 불평하지 않게 타이프 스크립트를 가져와야합니다. 그것은 브라우저에서 잘 실행되지만 전체 화면 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'. 

내 타이프 클래스 적절한 무엇

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

.

위의 해결책을 시도했지만 작동하지 않았습니다. 기존 인터페이스를 마스킹하는 것처럼 보였습니다.

정확하게 두 인터페이스를 확장 할 수 있도록, 내가 터 글로벌 선언 사용했다 :

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