Typescript type for (Angular) custom web element

Question

Having an Angular component with a corresponding element host which is passed through to a method in TypeScript like this:

constructor(hostElementRef: ElementRef, ipeConfigurationService: IPEConfigurationService) {
  this.ipeConfigurationService = ipeConfigurationService;
  this.ipeConfigurationService.registerHostElement(hostElementRef.nativeElement);
}

public registerHostElement(value: HTMLElement) {
  this._hostElement = value;
}

public toggleFullScreen(): void {
    if (!this._isFullScreen && this._hostElement) {
        if (this._hostElement.requestFullscreen) {
            this._hostElement.requestFullscreen();
        } else if (this._hostElement.mozRequestFullScreen) {
            this._hostElement.mozRequestFullScreen();
        } else if (this._hostElement.webkitRequestFullscreen) {
            this._hostElement.webkitRequestFullscreen();
        } else if (this._hostElement.msRequestFullscreen) {
            this._hostElement.msRequestFullscreen();
        }
    } else if (this._isFullScreen && this._hostElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
}

Gives an error when running: "mozRequestFullScreen does not exist on type HTMLElement".

If I change the hostElement to be: any there is no problem. I would like to declare the type usage as explicitly as possible preventing the use of any as much as possible. Any light or advice on this?

Estus Flask · Accepted Answer · 2018-02-21 15:14:36Z

HTMLElement interface just doesn't have this property.

If built-in type doesn't provide expected properties, an interface can be merged or extended, or union type can be specified.

Since merged interface will impose global behaviour, it's undesirable for resolving local typing issues.

Union type:

public toggleFullScreen(): void {
  interface RequestFullscreen {
    mozRequestFullscreen(): void;
  }
  ...
  const hostElement = <HTMLElement & RequestFullscreen>this._hostElement;
  hostElement.mozRequestFullscreen
  ...
}

Extended interface:

public toggleFullScreen(): void {
  interface RequestFullscreenElement extends HTMLElement {
    mozRequestFullscreen(): void;
  }
  ...
  const hostElement = <RequestFullscreenElement>this._hostElement;
  hostElement.mozRequestFullscreen
  ...
}

Merged local interface (although it looks misleading and cannot be recommended):

public toggleFullScreen(): void {
  interface HTMLElement {
    mozRequestFullscreen(): void;
  }
  ...
  const hostElement = <HTMLElement>this._hostElement;
  hostElement.mozRequestFullscreen
  ...
}

nicowernli · Accepted Answer · 2018-02-21 11:50:47Z

0

Your are getting that error because HTMLElement has no mozRequestFullScreen property or method. Check that here.

You might find some light to your problem in this other post

answered Feb 21, 2018 at 11:50

nicowernli

3,34826 silver badges39 bronze badges

3 Comments

Youp Bernoulli Over a year ago

I understand. The weird thing is that when you inspect the method with developer tools the concerning element is of (proto)type: HTMLElement. So that's confusing... because compile time it won't work and if you set it to be "any" all works fine and the debugger (Chrome) tells it is a HTMLElement...

Estus Flask Over a year ago

@BernoulliIT That's because they aren't related. Typescript relies on built-in type of same name and doesn't have a clue about what this element really looks like in browser. In fact, you can open an issue in TS repo or do a PR to improve HTMLElement interface.

Youp Bernoulli Over a year ago

Ah, get it. Then I understand @estus answer even better, to interfere with a custom interface.

Collectives™ on Stack Overflow

Typescript type for (Angular) custom web element

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related