在打字稿模块内扩展全局类型（例如“窗口”）答案

【问题标题】：Extending global types (e.g. "Window") inside a typescript module在打字稿模块内扩展全局类型（例如“窗口”）
【发布时间】：2018-04-18 05:31:18
【问题描述】：

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

【问题讨论】：

如何在解决方法中引用模块中的 d.ts 文件？

标签： typescript typescript-typings

【解决方案1】：

是的，你只需要将接口包装到全局声明中：

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

可以使用 declare global 声明从模块扩展全局范围

更多信息here

** 确保文件被视为模块（有 import 或 export 语句，如果没有 - 您可以添加空的 export {}）

【讨论】：

对于任何想知道为什么您的.d.ts 文件不起作用的人：如果文件中没有导出，请将export {} 添加到您的文件中。这使 TS 将您的文件识别为模块。来源：typescriptlang.org/docs/handbook/release-notes/…
这是在使用 typescript 时将数据从服务器上下文传递到浏览器上下文的正确方法
如果我们只在 d.ts 中有一个环境声明，而不添加一个导出来将其视为一个模块，这会不起作用吗？
@gaurav5430 那么你可能不需要declare global wrapper typescriptlang.org/play?#code/…

【解决方案2】：

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

这是我的解决方案：


interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

【讨论】：

【解决方案3】：

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

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

【讨论】：

不，这行不通。 '类型{新（）：窗口（）；原型窗口； } 不可分配给类型 Window。'