iOS DeviceOrientationEvent API 和打字稿答案

【问题标题】：iOS DeviceOrientationEvent API & TypescriptiOS DeviceOrientationEvent API 和打字稿
【发布时间】：2021-11-22 06:25:12
【问题描述】：

我为 @on:clock 回调设置了以下设置，该回调旨在询问用户对 iOS Safari 设备的 DeviceOrientationEvent API 的权限：

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

当我在 Vue 3 + Tyepscript 世界中执行此操作时，我设置了 deviceOrientationPermissionState 这是一个参考（更多关于参考：https://v3.vuejs.org/guide/reactivity-fundamentals.html）

这段代码可以正常工作，在 Safari iOS 或 webkit iOS 浏览器中加载时，需要获得许可，并且在回调时我可以访问设备的方向。

但是，Typescript 不喜欢。

Typescript 给我这个错误：

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

当我根据我的 Typescript 知识修复错误时，代码不再有效。

所以...我开始将接口声明为：

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

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

但是，typescript 还是不喜欢的东西。

谁能告诉我我做错了什么，如何在 Safari 上完成这项工作，并让我和 Typescript 保持最好的伙伴关系？

【问题讨论】：

标签： javascript typescript webkit deviceorientationevent

【解决方案1】：

今天在使用 VS Code 编译我们的 ReactJS 应用程序时遇到了同样的问题。为了解决 TypeScript 中缺少的方法，我只是将 DeviceOrientationEvent 转换为任何一行。

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

【讨论】：