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.

Question: How to fix that issue?

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.

Question: How to fix that issue?

• javascript
• typescript
• screen
• orientation

• 2 Does your browser support that? developer.mozilla./en-US/docs/Web/API/ScreenOrientation – 0stone0 Commented Mar 31 at 11:28
• 1 According to the table, Chrome Android fully supports and Chrome Desktop partially supports (I used both for testing). However, the error is thrown during the build stage. – ENIAC Commented Mar 31 at 11:32
• Can I use ScreenOrientation? – rozsazoltan Commented Mar 31 at 11:34
• @rozsazoltan, I've updated the question to include that the error is thrown during the build stage. – ENIAC Commented Mar 31 at 11:36
• "However, the error is thrown during the build stage." - probably because it knows that browser support for this isn't too good yet, and therefor doesn't allow you to use that method. – C3roe Commented Mar 31 at 11:37

2 Answers 2

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

• microsoft/TypeScript-DOM-lib-generator issue #1615: Missing "lock" method in ScreenOrientation
• microsoft/TypeScript issue #55539: Property 'lock' does not exist on type 'ScreenOrientation'

Alternative

You can declare it yourself in the ScreenOrientation interface:

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

• TypeScript Playground

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

• TypeScript Playground

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

• TypeScript Playground

As per the documentation you linked to you can see that

This feature is not Baseline because it does not work in some of the most widely-used browsers.

It is not fully supported by Chrome, Edge, Safari or Firefox and therefore I would assume that's why it is not included in drop-down