Vue2+TS项目使用window.EyeDropper报错的解决方法

在Vue2+TypeScript项目中使用window.EyeDropper时遇到类型报错，是因为TypeScript的全局Window类型默认未包含EyeDropper的定义，以下是几种可行的解决方法：

1. 临时类型断言（快速解决） #

如果只是临时场景使用，可通过类型断言绕过TS的类型检查：

// 最简单的方式，直接断言为any
console.log((window as any).EyeDropper);

或者更精确地声明局部类型，兼顾基础类型提示：

interface EyeDropper {
  open(): Promise<{ sRGBHex: string }>;
}

console.log((window as Window & { EyeDropper?: EyeDropper }).EyeDropper);

2. 扩展全局Window类型（全局生效，推荐） #

在项目src目录下创建全局类型声明文件（比如global.d.ts），添加EyeDropper的类型定义，让整个项目都能识别该类型：

// 定义EyeDropper接口
interface EyeDropper {
  open(): Promise<{ sRGBHex: string }>;
}

// 扩展全局Window类型
declare global {
  interface Window {
    EyeDropper?: EyeDropper;
  }
}

// 必须导出空对象，确保TS将该文件视为模块
export {};

添加后重启编辑器或TS服务，window.EyeDropper的类型错误会自动消失，还能获得对应的代码提示。

3. 配合兼容性判断（最佳实践） #

由于EyeDropperAPI并非所有浏览器都支持，建议使用前先做存在性检查，同时配合类型守卫：

if ('EyeDropper' in window) {
  const eyeDropper = new window.EyeDropper();
  eyeDropper.open().then(result => {
    console.log('选取的颜色:', result.sRGBHex);
  }).catch(err => {
    console.error('取色失败:', err);
  });
} else {
  alert('当前浏览器不支持取色器功能，请更换Chrome等现代浏览器');
}

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