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

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

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

TypeScript强调MyNamespace，并抱怨:

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

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

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

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

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

当前回答

TypeScript不会对字符串属性执行类型检查。

window["newProperty"] = customObj;

理想情况下，应该避免使用全局变量场景。我有时使用它在浏览器控制台中调试一个对象。

其他回答

要保持动态，只需使用:

(<any>window).MyNamespace

注意，这可能不适用于TSX，因为编译器可能认为<any>是TSX元素。查看与TSX兼容的类型断言的答案。

对于那些使用Angular CLI的人来说，这很简单:

文件src / polyfills.ts

declare global {
  interface Window {
    myCustomFn: () => void;
  }
}

文件my-custom-utils.ts

window.myCustomFn = function () {
  ...
};

如果你正在使用IntelliJ IDEA，你还需要在IDE中更改以下设置，然后你的新腻子才会开始:

> File
> Settings
> Languages & Frameworks
> TypeScript
> check 'Use TypeScript Service'.

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

interface Window {
    MyNamespace: any;
}

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

相反，我开始这样做:

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

declare var window: MyWindow;

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

从TypeScript ^3.4.3开始，这个解决方案不再有效

还是……

你可以输入:

window['MyNamespace']

你不会得到一个编译错误它和输入window。mynamespace是一样的。

推荐文章