使用useBattery自定义React Hook时遇TypeScript报错：Navigator无getBattery()

问题原因 #

TypeScript默认的DOM类型定义（lib.dom.d.ts）未包含Battery Status API的相关类型，所以会出现getBattery()不存在、找不到BatteryManager接口的报错。

解决方案 #

1. 手动扩展DOM类型定义

在项目中新建一个类型声明文件（比如src/types/battery.d.ts），添加以下代码扩展Navigator并定义BatteryManager接口：

interface Navigator {
  getBattery(): Promise<BatteryManager>;
}

interface BatteryManager extends EventTarget {
  charging: boolean;
  chargingTime: number;
  dischargingTime: number;
  level: number;
  onchargingchange: ((this: BatteryManager, ev: Event) => any) | null;
  onchargingtimechange: ((this: BatteryManager, ev: Event) => any) | null;
  ondischargingtimechange: ((this: BatteryManager, ev: Event) => any) | null;
  onlevelchange: ((this: BatteryManager, ev: Event) => any) | null;
}

2. 确保TypeScript识别该类型文件

打开tsconfig.json，检查include字段是否包含你新建的类型文件路径，示例配置：

{
  "compilerOptions": {
    // 其他配置...
  },
  "include": [
    "src/**/*",
    "src/types/**/*"
  ]
}

3. 添加浏览器兼容性检查（可选）

为避免在不支持该API的浏览器中报错，建议在Hook中先做兼容性判断：

import { useState, useEffect } from 'react';

const useBattery = () => {
  const [batteryState, setBatteryState] = useState<BatteryManager | null>(null);

  useEffect(() => {
    if (!navigator.getBattery) {
      console.warn("当前浏览器不支持电池状态API");
      return;
    }

    navigator.getBattery().then(battery => {
      setBatteryState(battery);

      // 监听电池状态变化
      const updateState = () => setBatteryState(battery);
      battery.addEventListener('chargingchange', updateState);
      battery.addEventListener('levelchange', updateState);
      battery.addEventListener('chargingtimechange', updateState);
      battery.addEventListener('dischargingtimechange', updateState);

      // 组件卸载时移除监听
      return () => {
        battery.removeEventListener('chargingchange', updateState);
        battery.removeEventListener('levelchange', updateState);
        battery.removeEventListener('chargingtimechange', updateState);
        battery.removeEventListener('dischargingtimechange', updateState);
      };
    });
  }, []);

  return batteryState;
};

export default useBattery;

内容的提问来源于stack exchange，提问作者Ala Eddine Menai