1

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

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

由于我在 Vue 3 + Tyepscript 世界中执行此操作，因此我设置deviceOrientationPermissionState了一个 ref（更多关于 refs 的信息：https ://v3.vuejs.org/guide/reactivity-fundamentals.html ）

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

但是，打字稿不喜欢。

打字稿给了我这个错误：

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",
}

但是，打字稿仍然不喜欢东西。

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

4

1 回答 1

0

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

const setDeviceOrientationPermission = async () => {
  if (typeof (DeviceOrientationEvent as any).requestPermission === 'function') {
    deviceOrientationPermissionState.value = await (DeviceOrientationEvent as any).requestPermission()
  }
}
于 2021-10-04T17:50:45.397 回答