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

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

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

TypeScript强调MyNamespace，并抱怨:

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

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

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

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

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

当前回答

完整和简短的回答

1-在tsconfig.json中添加typeRoots属性:

{
  "compilerOptions": {
    ...
    "typeRoots": ["src/@types", "node_modules/@types"]
    ...
  }
}

2-扩展窗口类型

// file: src/@types/global.d.ts

declare global {
    interface Window { customProperty: <type>; }
}

其他回答

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

还是……

你可以输入:

window['MyNamespace']

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

要保持动态，只需使用:

(<any>window).MyNamespace

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

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

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

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

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

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

这对我很有帮助。

对于那些想要在窗口对象上设置计算或动态属性的人，你会发现使用declare global方法是不可能的。来阐明这个用例

window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature

你可以尝试这样做

declare global {
  interface Window {
    [DyanmicObject.key]: string; // error RIP
  }
}

但上面的操作会出错。这是因为在TypeScript中，接口不能很好地使用计算属性，并且会抛出类似于

A computed property name in an interface must directly refer to a built-in symbol

为了解决这个问题，你可以按照建议将窗口转换为<any>

(window as any)[DynamicObject.key]

使用

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

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

interface MyNamespacedWindow extends Window {
    MyNamespace: object;
}

declare var window: MyNamespacedWindow;

推荐文章