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

Question

我通过显式设置属性来为我的对象设置全局命名空间window.

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

TypeScript强调MyNamespace并抱怨:

属性'MyNamespace'在'window'类型的值上不存在任何"

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

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

我怎样才能window留在那里让TypeScript开心？

作为旁注,我发现TypeScript抱怨特别有趣,因为它告诉我这种window类型any绝对可以包含任何东西.

Answer 1

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

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

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

基本上,您需要扩展现有window界面以告知它您的新属性.

Answer 2

要保持动态,只需使用:

(<any>window).MyNamespace

Answer 3

要么...

你可以输入:

window['MyNamespace']

并且你不会得到编译错误,它的工作方式与键入相同 window.MyNamespace

Answer 4

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

这是我做的:

(window as any).MyNamespace

Answer 5

接受的答案是我以前使用的,但使用TypeScript 0.9.*它不再有效.Window接口的新定义似乎完全取代了内置定义,而不是对其进行扩充.

我这样做了:

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

declare var window: MyWindow;

更新:使用TypeScript 0.9.5,接受的答案再次起作用.

Answer 6

全球是"邪恶的":),我认为具有便携性的最佳方式是:

首先导出界面:(例如:./ custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

第二个你导入

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

使用CustomWindow的第三个全局变量窗口

declare let window: CustomWindow;

这样,如果你使用window对象的现有属性,你在不同的IDE中也没有红线,所以最后尝试:

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

使用Typescript 2.4.x进行测试

Answer 7

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

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

请参阅手册的"声明合并"部分中的"全局扩充":https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Answer 8

创建一个名为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

Answer 9

我不需要经常这样做,我唯一的情况是使用Redux Devtools和中间件.

我只是做了:

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

或者你可以这样做:

let myWindow = window as any;

然后 myWindow.myProp = 'my value';

Answer 10

如果您使用的是Angular CLI,那么它非常简单:

SRC/polyfills.ts

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

我定制,utils.ts

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

如果您正在使用IntelliJ,则还需要在新的polyfill拾取之前更改IDE中的以下设置:

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

Answer 11

大多数其他答案并不完美.

• 其中一些只是抑制了商店的类型推断.
• 其他一些只关心全局变量作为命名空间,而不是接口/类

今天早上我也遇到了类似的问题.我在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(窗口的属性)中.

Answer 12

// In typings.d.ts(is Global)
export declare global {
    interface Window {
        __PUBLIC__: string;
    }
}

Answer 13

找到答案后,我认为这个页面可能会有所帮助. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation 不确定声明合并的历史,但它解释了为什么以下方法可行.

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

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

Answer 14

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

interface Window {
    MyNamespace: any;
}

Answer 15

如果您使用的是TypeScript Definition Manager,请按照以下步骤操作!

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 || {};

Answer 16

[2022]：我们必须在 React 或 Nextjs 项目中扩展“window”对象。我们可以使用以下步骤来解决这个问题。

• 在 src 文件夹名称中创建一个文件夹作为类型。

• 在 types 文件夹内创建一个文件，名称为index.d.ts

• 将此代码写入index.d.ts 文件中。

  export {};
   declare global {
     interface Window {
      NameSpace: any;
     }
  
   }
   window.NameSpace= window.NameSpace|| {};
  

保存此文件。

现在还有最后一项改变。

更改“ tsConfig.json ”文件。继承节点模块类型和我们的类型。

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

Answer 17

完整和简答

1- 将typeRoots属性添加到tsconfig.json：

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

2-延伸Window型

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

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

Answer 18

使用

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

使用字符串属性应该没问题，但是如果你真的想要一个单独的窗口并组织你的代码，你可以扩展窗口对象：

interface MyNamespacedWindow extends Window {
    MyNamespace: object;
}

declare var window: MyNamespacedWindow;

Answer 19

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

declare var window: any;

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

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

window.MyNamespace

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

window.MyNamespace = MyObject

现在打字稿不会抱怨了。

Answer 20

从 3.4 版开始，TypeScript 已经支持globalThis. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-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。

更新：添加了window对象和游乐场链接。

Answer 21

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

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

Answer 22

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

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

它与typescript@3.1.3一起使用。

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Answer 23

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

interface Window {
  someValue: string
  another: boolean
}

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

Answer 24

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

window["newProperty"] = customObj;

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

Answer 25

对于那些想要在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]