如何在TypeScript中显式地设置window的新属性?

我通过显式设置窗口上的属性为我的对象设置全局名称空间。

window.MyNamespace = window.MyNamespace || {};

TypeScript强调MyNamespace，并抱怨:

属性“MyNamespace”在类型为“window”的值上不存在任何“

我可以通过将MyNamespace声明为环境变量并删除窗口显式来使代码工作，但我不想这样做。

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

我如何保持窗口在那里，让TypeScript满意?

作为旁注，我发现特别有趣的是，TypeScript抱怨，因为它告诉我，窗口的类型是any，它肯定可以包含任何东西。

当前回答

接受的答案是我过去使用的，但使用的是TypeScript 0.9。它不再工作了。Window接口的新定义似乎完全取代了内置定义，而不是增强它。

相反，我开始这样做:

interface MyWindow extends Window {
    myFunction(): void;
}

declare var window: MyWindow;

更新:与TypeScript 0.9.5接受的答案再次工作。

其他回答

使用create-react-app v3.3，我发现实现这一点最简单的方法是扩展自动生成的react-app-env.d.ts中的Window类型:

interface Window {
    MyNamespace: any;
}

全局变量是“邪恶的”:)我认为拥有可移植性的最好方法是:

首先导出接口:(例如，./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

第二，导入

import {CustomWindow} from './custom.window.ts';

第三，使用CustomWindow强制转换全局变量窗口:

declare let window: CustomWindow;

通过这种方式，你也不会在不同的IDE中有红线，如果你使用它与窗口对象的存在属性，所以在最后尝试:

window.customAttribute = 'works';
window.location.href = '/works';

用TypeScript 2.4测试。X和最新!

如果你使用的是TypeScript 3。X，你可以在其他答案中省略声明全局部分，而只是使用:

interface Window {
  someValue: string
  another: boolean
}

当我使用TypeScript 3.3、Webpack和TSLint时，这种方法很有效。

今天我想在Angular(6)库中使用它，我花了一段时间才让它像预期的那样工作。

为了使我的库能够使用声明，我必须对声明全局对象的新属性的文件使用d.ts扩展名。

所以最后，这个文件就变成了这样:

/ path-to-angular-workspace / angular-workspace /项目/ angular-library / src / globals.d.ts

创建后，不要忘记在public_api.ts中公开它。

这对我很有帮助。

从3.4版开始，TypeScript已经支持globalThis。参见globalThis的类型检查。

从上面的链接:

// in a global file:
var abc = 100;
// Refers to 'abc' from above.
globalThis.abc = 200;
window.abc = 300; // window object can also be used.

操场上

“全局”文件是没有任何导入/导出语句的文件。声明var abc;可以写成。d.ts。

推荐文章