iOS DeviceOrientationEvent API结合TypeScript在Vue3中类型报错问题咨询

你遇到的类型报错核心原因是：requestPermission 是 DeviceOrientationEvent 构造函数的静态方法，而你之前的接口声明是给 DeviceOrientationEvent 实例扩展属性，两者的类型定义是分开的，所以声明不生效。

第一步：添加全局类型声明 #

在项目src目录下新建一个 global.d.ts 声明文件，写入以下内容：

declare global {
  // 扩展DeviceOrientationEvent实例的专属属性
  interface DeviceOrientationEvent {
    webkitCompassHeading: number | null;
    webkitCompassAccuracy: number | null;
  }

  // 扩展DeviceOrientationEvent构造函数的静态方法
  interface DeviceOrientationEventConstructor {
    requestPermission: () => Promise<PermissionState>;
  }

  // 将扩展后的构造函数挂载到Window类型上
  interface Window {
    DeviceOrientationEvent: DeviceOrientationEventConstructor & typeof DeviceOrientationEvent;
  }
}

// 必须加这段，让TS识别当前文件为模块，全局声明才会生效
export {};

第二步：校验tsconfig配置 #

确保你的 tsconfig.json 中的 include 字段包含了声明文件，示例配置：

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

第三步：业务代码无需修改 #

你原本的运行逻辑完全正确，不需要调整，直接保留即可，现在TypeScript不会再抛出类型错误。

额外说明 #

不需要自己声明PermissionState枚举，TypeScript的内置DOM类型已经定义了该类型，直接使用即可，避免类型冲突。

内容的提问来源于stack exchange，提问作者Micheal J. Roberts