javascript - iOS DeviceOrientationEvent API & Typescript

Jag har följande inställning för en @on:clock-återuppringning som är utformad för att be användaren om tillåtelse till DeviceOrientationEvent API för iOS Safari-enheter:

const setDeviceOrientationPermission = async () => {
  if (typeof DeviceOrientationEvent.requestPermission === 'function') {
    deviceOrientationPermissionState.value = await DeviceOrientationEvent.requestPermission()
  }
}

Eftersom jag befinner mig i Vue 3 + Typescript-världen när jag gör detta, sätter jag deviceOrientationPermissionState som är en ref (Mer om refs här: https://v3.vuejs.org/guide/reactivity-fundamentals.html)

Den här koden fungerar helt när den laddas i en Safari iOS- eller WebKit iOS-webbläsare, tillåtelse efterfrågas, och vid återuppringningen har jag tillgång till enhetens orientering.

DOCK, Typescript gillar inte.

Typescript ger mig detta fel:

Property 'requestPermission' does not exist on type '{ new (type: string, eventInitDict?: DeviceOrientationEventInit | undefined): DeviceOrientationEvent; prototype: DeviceOrientationEvent; }'.

När jag rättar felet så gott jag kan enligt mina kunskaper i Typescript, fungerar koden inte längre.

Så ... jag gick vidare med att deklarera ett gränssnitt som:

declare interface DeviceOrientationEvent {
  webkitCompassHeading: number | null
  webkitCompassAccuracy: number | null
  requestPermission: () => Promise<PermissionState>
}

enum PermissionState {
  "granted",
  "denied",
}

Men TypeScript gillar fortfarande inte saker.

Kan någon ge mig råd om vad jag har gjort fel, hur man får detta att fungera på Safari och också låter mig och Typescript förbli bästa vänner?

Svar #1

Stötte på samma problem idag när jag kompilerade vår ReactJS-applikation med VS Code. För att komma runt att metoden saknades i TypeScript kastade jag helt enkelt DeviceOrientationEvent till any för just den raden.

const setDeviceOrientationPermission = async () => {
  if (typeof (DeviceOrientationEvent as any).requestPermission === 'function') {
    deviceOrientationPermissionState.value = await (DeviceOrientationEvent as any).requestPermission()
  }
}