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?
Me encontré con este mismo problema hoy al compilar nuestra aplicación ReactJS con VS Code. Para sortear el método que falta en TypeScript, simplemente lancé DeviceOrientationEvent a any para esa línea.
const setDeviceOrientationPermission = async () => { if (typeof (DeviceOrientationEvent as any).requestPermission === 'function') { deviceOrientationPermissionState.value = await (DeviceOrientationEvent as any).requestPermission() } }