如何为Window添加属性并使其无需window前缀即可全局可用？

你遇到的问题核心是：虽然通过扩展Window接口给浏览器全局对象添加了globalStorage属性，但TypeScript并没有自动将其识别为全局变量——它只被当作window对象的一个属性，所以直接写globalStorage会报找不到名称的错误。

要实现像localStorage/sessionStorage那样无需前缀直接全局调用的效果，你需要在全局类型声明中同时扩展Window接口和声明全局变量，具体修改如下：

declare global {
    // 1. 扩展Window接口，让window.globalStorage有类型提示
    interface Window {
        globalStorage: GlobalStorage;
    }
    // 2. 单独声明全局变量globalStorage，让TypeScript识别它为全局可用
    var globalStorage: GlobalStorage;
}

// 赋值时可以用window.globalStorage，也可以直接用globalStorage（二选一即可）
window.globalStorage = new GlobalStorage();
// 或者直接写：globalStorage = new GlobalStorage();

export function loadGlobal<TData>(key: string, defaultValue: TData): TData;
export function loadGlobal<TData>(key: string): TData | undefined;
export function loadGlobal<TData>(key: string, defaultValue?: TData) {
    // 现在可以直接用globalStorage，不用加window.前缀
    return load(globalStorage, key, defaultValue);
}

export function saveGlobal<TData>(key: string, data: TData) {
   return save(globalStorage, key, data);
}

export function hasKeyGlobal(key: string) {
    return hasKey(globalStorage, key);
}

原理说明 #

TypeScript内置的localStorage/sessionStorage之所以能全局调用，是因为在lib.dom.d.ts中它们同时满足两个条件：

• 作为Window接口的属性存在；
• 被声明为全局变量（var localStorage: Storage;）。

我们的自定义globalStorage需要复刻这个模式，这样TypeScript才会把它当作和内置API一样的全局变量处理，无需每次通过window.访问。

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