Tengo la siguiente configuración para una devolución de llamada @on:clock que está diseñada para pedir permiso al usuario para la API de DeviceOrientationEvent para dispositivos iOS Safari:

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

Como estoy en el mundo de Vue 3 + Tyepscript al hacer esto, configuro deviceOrientationPermissionState , que es una referencia (Más sobre referencias aquí: https://v3.vuejs.org/guide/reactividad-fundamentals.html )

Este código funciona, cuando se carga en un navegador Safari iOS o webkit iOS, se solicita permiso y, al devolver la llamada, tengo acceso a la orientación del dispositivo.

SIN EMBARGO , mecanografiado no me gusta.

Mecanografiado me está dando este error:

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

Cuando arreglo el error lo mejor que puedo, el código ya no funciona.

Así que... procedí a declarar una interfaz como:

 declare interface DeviceOrientationEvent { webkitCompassHeading: number | null webkitCompassAccuracy: number | null requestPermission: () => Promise<PermissionState> } enum PermissionState { "granted", "denied", }

Pero, mecanografiado todavía no le gustan las cosas.

¿Alguien puede aconsejarme sobre lo que hice mal, cómo hacer que esto funcione en Safari y también permitir que Typescript y yo sigamos siendo los mejores amigos?