TypeScript complaining about a proper HTML5 Fullscreen API method

Question

this.video.exitFullscreen();

I get this error:

[ts] Property 'exitFullscreen' does not exist on type 'HTMLVideoElement'

This method does exist and my reference to the video is 100% right because I have used it many times in my code. How do I solve this so typescript will compile without giving me this error?

I found one answer which suggests to implement an interface like this:

interface Document {
    exitFullscreen: () => void;
    mozCancelFullScreen: () => void;
    webkitExitFullscreen: () => void;
    fullscreenElement: () => void;
    mozFullScreenElement: () => void;
    webkitFullscreenElement: () => void;
}

but how can I use this interface if I already have two interfaces defined (for state and props) and my class is already using them:

class Player extends React.Component<IProps, IState> { ... }

I can't use the third interface on this class. How can I solve the problem?

Answer 1

As far as I can tell you're looking for document.exitFullscreen , as HTMLVideoElement.exitFullscreen does not exist according to MDN.

Can you try document.exitFullscreen() ? Rather than calling exitFullscreen on this.video .

As you pointed out, typescript doesn't know about the moz prefixed functions, so adding this file anywhere in your project (you don't have to derive from it) should remove your compiler errors for document.mozCancelFullScreen

interface Document {
    mozCancelFullScreen: () => void;
    mozFullScreenElement: Element;
}

Answer 2

您可以使用类型断言来向编译器提供提示：

(this.video as Document).exitFullscreen();