如何在TypeScript中声明实验性全局变量（EyeDropper API场景）

1. 正确扩展全局Window接口 #

不要单独导出EyeDropper类，而是将其合并到全局Window的类型声明中，让TypeScript识别window.EyeDropper的存在：

interface ColorSelectionResult {
    sRGBHex: string;
}

interface ColorSelectionOptions {
    signal: AbortSignal;
}

declare class EyeDropper {
    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
}

// 扩展全局Window接口，标记EyeDropper为可选属性
declare global {
    interface Window {
        EyeDropper?: typeof EyeDropper;
    }
}

这样处理后，TypeScript会明确知道window.EyeDropper的类型是typeof EyeDropper | undefined，不会再抛出Property 'EyeDropper' does not exist的错误。

2. 无字符串的优雅运行时检测 #

现在可以直接用类型检测写法，TypeScript会自动完成类型收窄：

if (typeof window.EyeDropper === 'function') {
    // 此时TS自动推断window.EyeDropper为构造函数类型
    const dropper = new window.EyeDropper();
    dropper.open().then(result => {
        console.log(result.sRGBHex);
    });
}

3. 错误写法的问题解析 #

你之前尝试的type EyeDropper = EyeDropperClass | undefined存在两个核心问题：

• 覆盖了原本的类声明，导致TypeScript无法识别它是可实例化的构造函数
• 未关联全局Window对象的类型定义，因此访问window.EyeDropper仍会报错

通过扩展Window接口，我们既保留了EyeDropper类的完整类型，又告知TS该属性在window上是可选的，同时满足类型检测和运行时检查的需求。

可选：封装复用的类型守卫 #

如果需要在多处复用检测逻辑，可以封装类型守卫函数，让代码更清晰：

function isEyeDropperAvailable(): window is Window & { EyeDropper: typeof EyeDropper } {
    return typeof window.EyeDropper === 'function';
}

// 使用方式
if (isEyeDropperAvailable()) {
    const dropper = new window.EyeDropper();
    // 后续可安全调用API
}

调用该函数时，TypeScript会自动收窄window的类型，确保EyeDropper已存在。

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