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

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

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

TypeScript强调MyNamespace，并抱怨:

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

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

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

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

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

当前回答

供参考(这是正确答案):

在。d里面。Ts定义文件

type MyGlobalFunctionType = (name: string) => void

如果你在浏览器中工作，你可以通过重新打开window的界面将成员添加到浏览器的窗口上下文:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Node.js也是这样:

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType
  }
}

现在你声明根变量(它将实际存在于window或global上):

declare const myGlobalFunction: MyGlobalFunctionType;

然后在一个普通的.ts文件中，但作为副作用导入，你实际上实现了它:

global/* or window */.myGlobalFunction = function (name: string) {
  console.log("Hey !", name);
};

最后在代码库的其他地方使用它，使用:

global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");

其他回答

下面是如何做到这一点，如果你使用的是TypeScript定义管理器!

npm install typings --global

创建输入/定制/ window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

安装自定义输入:

typings install file:typings/custom/window.d.ts --save --global

完成了!使用它!TypeScript不会再抱怨了:

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

在四处寻找答案后，我认为这个页面可能会有所帮助:

全球增长

我不确定声明合并的历史，但它解释了为什么下面可以工作。

declare global {
    interface Window { MyNamespace: any; }
}

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

使用

window["MyNamespace"] = window["MyNamespace"] || {};

应该是正确的，因为它使用了一个字符串属性，但如果你真的想有一个分离的窗口和组织你的代码，你可以扩展窗口对象:

interface MyNamespacedWindow extends Window {
    MyNamespace: object;
}

declare var window: MyNamespacedWindow;

要保持动态，只需使用:

(<any>window).MyNamespace

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

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

window["newProperty"] = customObj;

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

推荐文章