Angular 7 - How does work the HTML5 Fullscreen API ? I've a lot of errors

Question

I use Angular 7 and I would like have a button for put my app in fullscreen. I use the HTML5 Fullscreen API and I've make 2 functions :

openfullscreen() {
    // Trigger fullscreen
    console.log('gg');
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
      document.documentElement.msRequestFullscreen();
    }
    this.isfullscreen = true;
  }

  closefullscreen(){
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
    this.isfullscreen = false;
  }

It worked in the beginning but I had a lot of error :

error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.

error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.

error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.

error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.

error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?

error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?

error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.

error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.

error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?

error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?

When I restart my code I've the same errors but, in addition, I've that :

Failed to compile.

And my app don't work. How I can compile without errors?

Answer 1

Defining types:

type ExitFullscreen = typeof document.exitFullscreen
type RequestFullscreen = typeof document.documentElement.requestFullscreen

declare global {
  interface Document {
    webkitExitFullscreen: ExitFullscreen;
    mozCancelFullScreen: ExitFullscreen;
    msExitFullscreen: ExitFullscreen;
  }

  interface HTMLElement {
    webkitRequestFullscreen: RequestFullscreen;
    mozRequestFullScreen: RequestFullscreen;
    msRequestFullscreen: RequestFullscreen;
  }
}