如何在TypeScript的`window`上显式设置新属性？

我通过在上显式设置属性来为对象设置全局名称空间window。

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

TypeScript强调MyNamespace并抱怨：

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

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

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

我怎样才能window留在那里并使TypeScript开心呢？

作为旁注，我发现TypeScript抱怨特别有趣，因为它告诉我window类型any肯定可以包含任何内容。

刚刚在另一个StackOverflow问题的答案中找到了答案。

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

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

基本上，您需要扩展现有window接口以向其介绍新属性。

要使其保持动态，只需使用：

(<any>window).MyNamespace

截至TYPESCRIPT ^ 3.4.3，此解决方案不再起作用

要么...

您可以输入：

window['MyNamespace']

而且不会出现编译错误，它的作用与键入相同 window.MyNamespace

使用TSX？没有其他答案对我有用。

这是我所做的：

(window as any).MyNamespace

可接受的答案是我曾经使用的答案，但是使用TypeScript 0.9。*时，它将不再起作用。Window接口的新定义似乎完全取代了内置定义，而不是对其进行了扩充。

我已经改为这样做：

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

declare var window: MyWindow;

更新：使用TypeScript 0.9.5，可接受的答案再次起作用。

全局是“邪恶的” :)，我认为具有可移植性的最佳方法是：

首先，您导出接口：（例如：./ 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测试，最新！

如果需要window使用需要使用的自定义类型扩展对象，则import可以使用以下方法：

窗口

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

请参阅手册“声明合并”部分中的“全局增强”：https : //www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

对于使用Angular CLI的用户来说，它很简单：

src / polyfills.ts

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

my-custom-utils.ts

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

如果您使用的是IntelliJ，则还需要在IDE中更改以下设置，然后才能拾取新的polyfills：

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

我不需要经常这样做，我遇到的唯一情况是将Redux Devtools与中间件一起使用。

我只是做了：

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

或者您可以这样做：

let myWindow = window as any;

然后 myWindow.myProp = 'my value';

其他大多数答案都不完美。

• 其中一些只是抑制shop的类型推断。
• 其他一些只关心全局变量作为名称空间，而不关心接口/类

今天早上我也遇到类似的问题。我在SO上尝试了很多“解决方案”，但是没有一个绝对不会产生类型错误，并且不会在IDE（webstorm或vscode）中触发类型跳转。

最后，从这里

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

，我找到了一个合理的解决方案，可以为用作接口/类和名称空间的全局变量附加类型。

示例如下：

// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

现在，上面的代码将名称空间MyNamespace和接口的类型MyNamespace合并到全局变量myNamespace（window的属性）中。

在找到答案之后，我认为此页面可能会有所帮助。 https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation 不确定声明合并的历史记录，但是它说明了以下内容可以工作的原因。

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

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

如果您使用的是TypeScript定义管理器，请执行以下操作！

npm install typings --global

创建typings/custom/window.d.ts：

interface Window {
  MyNamespace: any;
}

declare var window: Window;

安装您的自定义键入：

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

完成，使用它‌！打字稿不会再抱怨了：

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

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

window["newProperty"] = customObj;

理想情况下，应避免使用全局变量方案。我有时用它来调试浏览器控制台中的对象。

创建一个名为global.d.tseg 的文件，/src/@types/global.d.ts然后定义如下接口：

interface Window {
  myLib: any
}

参考：https : //www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

如果您使用的是Typescript 3.x，则可以declare global在其他答案中省略该部分，而只需使用：

interface Window {
  someValue: string
  another: boolean
}

这在使用Typescript 3.3，WebPack和TSLint时与我合作。

供参考（这是正确的答案）：

在.d.ts定义文件中

type MyGlobalFunctionType = (name: string) => void

如果您在浏览器中工作，则通过重新打开Window的界面将成员添加到浏览器的window上下文中：

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

NodeJS的想法相同：

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");

创建一个自定义界面扩展Window并将您的自定义属性添加为可选属性。

然后，让customWindow使用自定义界面，但与原始窗口一起使用。

它与typescript@3.1.3一起使用。

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

对于那些想要在window对象上设置计算或动态属性的人，您会发现使用该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

为了解决这个问题，你可以用暗示铸造去window到<any>这样你就可以做

(window as any)[DynamicObject.key]

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

interface Window {
    MyNamespace: any;
}

首先，您需要在当前范围内声明窗口对象。
因为打字稿想知道对象的类型。
由于窗口对象是在其他位置定义的，因此无法重新定义它。
但是您可以声明如下：

declare var window: any;

这不会重新定义window对象，也不会创建另一个具有name的变量window。
这意味着窗口是在其他地方定义的，您只是在当前作用域中引用它。

然后，您可以通过以下方式简单地引用MyNamespace对象：

window.MyNamespace

或者您可以window通过以下方式简单地在对象上设置新属性：

window.MyNamespace = MyObject

现在打字稿将不会抱怨。

我今天想在Angular（6）库中使用它，花了我一段时间才能使它按预期工作。

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

所以最后，该文件最终显示为：

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

创建完成后，请不要忘记在您的中公开它public_api.ts。

对我来说就做到了。希望这可以帮助。