javascripttypescriptscreenorientation

Screen Orientation Lock

I'm working on a small project in order to learn TS/JS and Pixi JS. And came up with the following problem I cannot find the solution (or, at least, explanation) for.

Per the reference, there is the lock() method for the screen orientation. However, when I try to use it, I get the error TS2339: Property 'lock' does not exist on type 'ScreenOrientation'. in VS Code during the build stage. Moreover, the VS Code's drop-down menu doesn't list the lock() method. However, it provides the unlock() method.

VS Code

Question: How to fix that issue?

Solution

  • Although some browsers support it, TypeScript will throw an error because it doesn't recognize this property yet. This is a known issue:

    Alternative

    You can declare it yourself in the ScreenOrientation interface:

    interface ScreenOrientation {
  lock(): Promise<void>;
}

    This is recommended by HolgerJeromin in one of the issues:

    type OrientationLockType = "any" | "landscape" | "landscape-primary" | "landscape-secondary" | "natural" | "portrait" | "portrait-primary" | "portrait-secondary";
interface ScreenOrientation extends EventTarget {
  lock(orientation: OrientationLockType): Promise<void>;
}

    This can be shortened by using the already declared OrientationType:

    type OrientationLockType = "any" | "landscape" | "natural" | "portrait" | OrientationType
interface ScreenOrientation extends EventTarget {
  lock(orientation: OrientationLockType): Promise<void>;
}