How do I get typescript to stop complaining about functions it doesn't know about?
I have the same problem. Just use 'Square bracket' notation to solve it.
if (document['exitFullscreen']) {
document['exitFullscreen']();
} else if (document['webkitExitFullscreen']) {
document['webkitExitFullscreen']();
} else if (document['mozCancelFullScreen']) {
document['mozCancelFullScreen']();
} else if (document['msExitFullscreen']) {
document['msExitFullscreen']();
}
Simplistically, you could add those items to the Document
interface and the errors would go away.
interface Document {
exitFullscreen: any;
mozCancelFullScreen: any;
webkitExitFullscreen: any;
fullscreenElement: any;
mozFullScreenElement: any;
webkitFullscreenElement: any;
}
You could add full type information for each of these, even the simple:
interface Document {
exitFullscreen: () => void;
mozCancelFullScreen: () => void;
webkitExitFullscreen: () => void;
fullscreenElement: () => void;
mozFullScreenElement: () => void;
webkitFullscreenElement: () => void;
}
This would prevent them being mis-used.
For static properties, you may just need to make the type dynamic, the important part in the example below is the type assertion on Element
, i.e. (<any>Element)
:
fs.webkitRequestFullscreen((<any>Element).ALLOW_KEYBOARD_INPUT);
Adding to the answer of Fenton we added some details to these types and declared them in a regular TypeScript Module with imports/exports. This means you also have to declare the global namespace:
declare global {
interface Document {
mozCancelFullScreen?: () => Promise<void>;
msExitFullscreen?: () => Promise<void>;
webkitExitFullscreen?: () => Promise<void>;
mozFullScreenElement?: Element;
msFullscreenElement?: Element;
webkitFullscreenElement?: Element;
}
interface HTMLElement {
msRequestFullscreen?: () => Promise<void>;
mozRequestFullscreen?: () => Promise<void>;
webkitRequestFullscreen?: () => Promise<void>;
}
}