在打字稿模块中扩展"窗口"

Question

如果您使用typescript编写,并且未使用模块,则可以扩展全局Window对象.例如,这编译:

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0;
++window.myCounter;

function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)
}

但是,如果我前缀功能outputLoadingDetails有export,看来我这个文件转换成一个模块.我现在访问时遇到编译器错误window.myCounter.

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0; // ERROR: property 'MyCounter' does not exist on type `Window`
++window.myCounter;                       // ERROR: property 'MyCounter' does not exist on type `Window`

export function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)  // ERROR: property 'MyCounter' does not exist on type `Window`
}

看来我的接口声明不再扩展全局Window类型.

我找到的一个解决方法是将接口声明放入一个单独的*.d.ts文件中,并从我的模块中引用它.

但现在我很好奇.有什么方法可以Window在模块代码中扩展接口吗？

Answer 1

我不喜欢修改global声明，因为修改会出现在其他文件中。

这是我的解决方案：

interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

Answer 2

是的,您只需要将接口包装到全局声明中:

declare global {
    interface Window {
        myCounter: number;
    }
}

更多信息在这里