Missing "lock" method in ScreenOrientation

[mistic100]

I just updated from 5.1.3 to 5.2.2 and I cannot compile anymore because the "lock" method was removed from the ScreenOrientation interface.

I don't think this is correct.

This is the change https://github.com/microsoft/TypeScript/pull/54725/files#diff-dc0eab937d15e62545da3ed7b4f40ad6b24f15dd88fbc6ceda2bfb4ed8356eb0L20901

MDN : https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

ping Nathan Shively-Sanders (@sandersn)

thanks

[mistic100]

Hmm it seems it's because it falls under the "two major browsers" threshold since Firefox removed it (duh !). However Chrome Android having the majority of the smartphone market wouldn't it make sense to keep it ?

[richso]

for those who experience this compilation error, you may change to this alternative syntax to bypass the compiler error:

window.screen.orientation['lock']('landscape');

[tsukumijima]

Kagami Sascha Rosylight (@saschanaz)
I am running into the same problem. This is an obvious regression and should be corrected ASAP.

[liyokuna]

hello,

I am facing this issue, can't wait for the fix.
the temp solution from richso is not working on my angular project.

[eduardo-mior]

Lionel (MC) (@liyokuna) As a temporary solution I change the source codes of this lib inside VSCode, so the error stops happening, but every time I update VSCode I need to adjust the source code again, as the source code is inside the VScode folder installed on the my computer.

It's not a recommended solution, but this way VScode stops reporting unnecessary and incorrect errors. This only works for VScode.

[liyokuna]

thanks for the answer but Eduardo Mior (@eduardo-mior) i'm on intelli j unfortunately :|

[mistic100]

or just add // @ts-ignore before the line

[HolgerJeromin]

I think the correct way would be adding the now missing interface locally in one of your .ts or .d.ts files:

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

[liyokuna]

yep did that, Damien Sorel (@mistic100) but i thnik my issue is maybe somewhere else in my ngular project...

[jakebailey]

Placing that into a d.ts file included in your project will also augment the global types and allow things to work. You definitely do not need to be overwriting any files in VS Code or node_modules to add things to the globals like this.

[Knagis]

the main issue is that unlock is there, while lock was removed. even if there is a valid reason to remove lock, it should be consistent, since both of the methods have the same support.

[mistic100]

To be fair both method don't have the same support.

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/unlock#browser_compatibility

[haroldjeshua]

encountered this on vite-react-typescript stack, Holger Jeromin (@HolgerJeromin) 's answer worked perfectly. thanks

[rozsazoltan]

Holger Jeromin (@HolgerJeromin)'s solution can be shortened by using the already declared OrientationType:

// typescript/lib/lib.dom.d.ts
type OrientationType = "landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary";

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

[danielhjacobs]

Seems fixed as of TS 6