TypeScript如何修改原生window对象类型 解决navigator声明冲突报错

TS2687报错的触发原因是TypeScript全局类型定义中已经预先声明了Window接口的navigator属性，且该属性带有固定修饰符（默认为只读），你二次声明该属性时没有和原有修饰符保持完全一致，因此触发冲突。

同时你的扩展方案不需要重写Window的navigator属性，也不需要额外自定义继承自Navigator的接口，直接利用TS的接口声明合并特性扩展原有全局Navigator接口即可。

分两种场景适配：

• 如果你的声明文件是全局生效的（文件内没有import/export语句），直接写如下代码即可：

interface Navigator {
  usb?: {
    getDevices?: () => Array<string>
  }
}

• 如果你的声明文件是模块文件（文件内存在import/export语句），需要将扩展声明放在declare global块中：

declare global {
  interface Navigator {
    usb?: {
      getDevices?: () => Array<string>
    }
  }
}

// 模块文件必须加空导出，让TS识别该文件为模块
export {}

• 额外定义INavigator接口属于冗余操作，TS允许直接对已存在的全局接口追加属性声明，同名接口会自动合并
• 手动重写Window下的navigator属性属于多余操作，只要扩展了Navigator接口，window.navigator的类型会自动同步更新，重复声明反而会触发修饰符冲突

内容的提问来源于stack exchange，提问作者Eugene Zalivadnyi