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

webkitrequestfullscreen
request fullscreen error
uncaught (in promise) typeerror: fullscreen error
failed to execute 'requestfullscreen' on 'element': api can only be initiated by a user gesture.
document exitfullscreen
fullscreenelement
angular fullscreen
object doesn t support property or method requestfullscreen

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?

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

Don't let TypeScript slow you down | by Vitaly Belman, 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� 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?

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']();
 }

TypeScript, To emphasize and clarify: I ❤ TypeScript — This isn't a hate article. For example, consider these types from LoDash to the flatMap function: greatest advantage of TypeScript is to allow us to validate types and prevent unexpected If you ever try to assume that result is a string, TypeScript will complain. If you get that error, resolve it by creating a tsconfig.json file in the root folder of your project. The tsconfig.json file lets you control how Visual Studio Code compiles your TypeScript code. For more information, see the tsconfig.json overview. Why do I get different errors and warnings with VS Code than when I compile my TypeScript project?

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

TypeScript 2.6 Milestone � GitHub, Cypress ships with official type declarations for TypeScript. You may have to restart your IDE's TypeScript server if the setup above does not appear to work. to the cy object, you can manually add their types to avoid TypeScript errors. and TS compiler should // not complain about unknown method cy. But TS won't compile this. It complains that the props.optionalString object is possibly undefined - even though I clearly defined a default value at the top of the function. Why does it do this?? Well, TS sees the function as being bound at the point when the component is mounted.

Steve fenton's answer is excellent and in the long run that is what you should do. Remember Types are documentation and will help the next developer.

Bad but proving that typescript is permissive if you want it to be

Purely as a thought experiment you can create a local variable to shadow the global one and explicitly type it to be any only once:

function toggleFullScreen(element: JQuery) {
    var document:any = window.document;
    document.AnythingCanHappen = 123; // No error 
}

And for more fancy ones (grab from an outer scope):

var Element_Copy=Element; 
function toggleFullScreen(element: JQuery) {
    var Element:any = Element_Copy; 
    Element.ShootMyself = true;
} 

Complete example:

var Element_Copy=Element;                         // Magic
function toggleFullScreen(element: JQuery) {
    var document:any = window.document;           // Magic
    var Element:any = Element_Copy;               // Magic
    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();
        }
    }
}

The introduction to Typescript you may be missing, [TS2.5 regression] TypeScript complains about functions returning never on some Typescript service is often stopping working randomly: Cannot read property Type checker doesn't understand string literal type in computed property key� Recommendations for writing d.ts files. This has a very specific meaning: the done callback might be invoked with 1 argument or might be invoked with 2 arguments. The author probably intended to say that the callback might not care about the elapsedTime parameter, but there’s no need to make the parameter optional to accomplish this — it’s always legal to provide a callback that accepts

This is not recommended but another solution to stop the compiler complaining:

const document: any = window.document;

Microsoft's new handbook with TypeScript basics, Because Typescript doesn't follow the semantic version, each version In newer versions, Typescript has adopted the new features of newer versions of the And this is often the point when people start complaining. TypeScript - Arithmetic Operators Examples - Assume the values in variables a and b are 10 and 5 respectively.

Importing Javascript Components Marks all props as required, Property 'toLocaleLowercase' does not exist on type 'string'. Did you mean TypeScript is telling us we forgot to pass an argument to the greet function, and rightfully so. So far we've Why should converting it over to TypeScript stop you from running it? We could constrain T , and TypeScript would no longer complain:. The "Functions: Parameters" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson: Mike discusses required parameters, default values, and rest parameters. TypeScript assumes every argument in the function is required.

Microsoft/TypeScript, importing this into TypeScript, I'm getting errors because it assumes every prop is SFC<Props> = (props) => ( <div> // Button complains here because it doesn't have the 'theme' is missing in type '{ children: Element; onClick: Function; theme: any }'. if I change the JS Button to have the following, TS stops complaining.

1. Getting to Know TypeScript - Effective TypeScript [Book], that keeps the type checker happy but doesn't generate the argument slicing and lastly, how do I stop typescript from complaining about function Foo() { } var x �

Comments
  • Perhaps create a .d.ts file? (Or in this specific case, find one someone else has already created -- and if not, share the one you do...)
  • Why is it not recommended?