在打字稿模块中扩展“窗口”

时间:2017-11-06 05:39:54

标签: typescript

如果您使用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接口吗?

3 个答案:

答案 0 :(得分:8)

是的,你只需要将界面包装成全局声明:

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

可以使用declare global声明

从模块扩充全局范围

更多信息here

答案 1 :(得分:2)

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

这是我的解决方案:


interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

答案 2 :(得分:-1)

interface Window { mycounter:number; }
window=Window;
window.myCounter = window.myCounter || 0;
++window.myCounter; 

我认为这可能有效,但我不确定