Typescript Definitions: Property does not exist on type 'false | Screenfull'.

[Knacktus]

Trying to access a property screenfull.isFullscreen is leading to this message:

Property 'isFullscreen' does not exist on type 'false | Screenfull'. Property 'isFullscreen' does not exist on type 'false'.

Import statement: import * as screenfull from "screenfull";

Changing the definitions from declare const screenfull: Screenfull | false; to declare const screenfull: Screenfull; works.

[cipchk]

Shoule be throw error.

error TS2339: Property 'isFullscreen' does not exist on type 'typeof import("/home/travis/build/ng-alain/delon/integration/integration/node_modules/screenfull/dist/screenfull")'.

[sindresorhus]

The TypeScript definition is correct according to the code:

https://github.com/sindresorhus/screenfull.js/blob/1bd0f448a5816c22a49b036bbd415af3b137fc7d/src/screenfull.js#L146-L154

If the fullscreen API is not supported at all, it will be false. The reason it's always documented as if (screenfull.enabled) { and not if (screenfull && screenfull.enabled) { is that false.enabled actually works in JS and is undefined.

[sindresorhus]

import * as screenfull from "screenfull";

You should import it as import screenfull from 'screenfull';.

[Knacktus]

Okay, I see. I had to update my Typescript code according to http://www.typescriptlang.org/docs/handbook/advanced-types.html

import screenfull, { Screenfull } from "screenfull";

function isScreenFull(sf: Screenfull | false): sf is Screenfull {
  return (sf as Screenfull).isFullscreen;
}

if (isScreenFull(screenfull)) {
  if (screenfull.isFullscreen) {
    screenfull.exit();
  } else {
    screenfull.request();
  }
}

Now all is fine.

Thanks!

[iamart]

@sindresorhus typescript will throw an error if you use if (screenfull.enabled) { and not if (screenfull && screenfull.enabled) {. Even though false.enabled is a valid js, it is not valid ts. To fix this breaking change introduced in 4.1.0 you have to do:

if (screenfull && screenfull.enabled) {
  screenfull.toggle();
}

or you can typecast it:

import screenfull, { Screenfull } from 'screenfull';
if ((<Screenfull>screenfull).enabled) {
  (<Screenfull>screenfull).toggle();
}

Otherwise declaration file must be fixed.

[GeorgeKnap]

import * as screenfull from "screenfull";

You should import it as import screenfull from 'screenfull';.

typescript error: Module has no default export

[iamart]

import * as screenfull from "screenfull";

You should import it as import screenfull from 'screenfull';.

typescript error: Module has no default export

@GeorgeKnap the issue introduced in last 420 release. @sindresorhus export = screenfull does not provide a default export in ecmascript, so we can't import it that way anymore. is there a reason you want to support CommonJS out of the box?

[BobCashStory]

it's still doesn't work :/ with import * as screenfull from 'screenfull'; screenfull.enabled => Property 'enabled' does not exist on type 'false and with import screenfull from 'screenfull'; => screenfull"' has no default export.

[akcoder]

Here is how I solved the issue until this is officially resolved:

import * as screenfull from "screenfull";
import {Screenfull} from "screenfull";

...

    toggleFullscreen() {
        let sf = <Screenfull>screenfull;
        if (sf.enabled) {
            sf.toggle();
        }
    }

Hope this helps!

[ofcRS]

import * as screenfull from "screenfull"; import {Screenfull} from "screenfull";

(screenfull as Screenfull).toggle();

[DBankx]

import * as screenfull from "screenfull"; import {Screenfull} from "screenfull";

(screenfull as Screenfull).toggle();

This worked for me thanks