Question

30

How do I get typescript to stop complaining about functions it doesn't know about?

rated 0 times [ 36] [ 6] / answers: 1 / hits: 18086 / 10 Years ago, tue, september 23, 2014, 12:00:00

I'm using Typescript for a web app that needs to use the JavaScript full screen API. The full screen API isn't officially supported yet, so you have to use vendor prefixes. Here's my code, based on the sample from MDN:

function toggleFullScreen(element: JQuery) {

    var fs = element[0];

    if (!document.fullscreenElement &&    // alternative standard method

        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods

        if (fs.requestFullscreen) {

            fs.requestFullscreen();

        } else if (fs.msRequestFullscreen) {

            fs.msRequestFullscreen();

        } else if (fs.mozRequestFullScreen) {

            fs.mozRequestFullScreen();

        } else if (fs.webkitRequestFullscreen) {

            fs.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);

        }

    } else {

        if (document.exitFullscreen) {

            document.exitFullscreen();

        } else if (document.msExitFullscreen) {

            document.msExitFullscreen();

        } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen();

        } else if (document.webkitExitFullscreen) {

            document.webkitExitFullscreen();

        }

    }

}

However in my IDE (Visual Studio, but this would happen anywhere), I get errors like:

The property 'fullscreenElement' does not exist on value of type 'Document'.

The property 'mozFullScreenElement' does not exist on value of type 'Document'.

The property 'webkitFullscreenElement' does not exist on value of type 'Document'.

Of course TypeScript can't know that these functions exist, but nor do I want to re-declare document as any just to get rid of these errors, because then I'll lose all the other type hints.

What is the solution here? How do I get TypeScript to stop complaining but keep as many type annotations as I can?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tatyanna

Add To Favorites

Follow

Total Points: 552

Total Questions: 96

Total Answers: 96

Location: Cook Islands

Member since Thu, May 21, 2020

4 Years ago

answered 10 Years ago tobyl · Accepted Answer

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