如何使用jsdom和typescript防止'全局'类型中存在"属性'...'？

Question

我尝试将现有项目转换为使用Typescript,我在测试设置时遇到了问题.

我有一个用于我的测试的安装文件,用于设置jsdom,以便我的所有DOM交互代码在我的测试期间工作.使用Typescript(ts-node with mocha)我总是得到这样的错误:

Property 'window' does not exist on type 'Global'.

为了防止这种情况,我尝试修补NodeJS.Global接口,如下所示:

declare namespace NodeJS{
  interface Global {
    document: Document;
    window: Window;
    navigator: Navigator;
  }
}

但这并没有改变任何事情.

如何在NodeJS全局变量上启用这些浏览器属性？

附加功能:

这是我的摩卡setup.ts:

import { jsdom, changeURL } from 'jsdom';

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = global.document.defaultView;
Object.keys(global.document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = global.document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js',
};

changeURL(global.window, 'http://example.com/');

Answer 1

把它放在打字稿文件的顶部

const globalAny:any = global;

然后使用globalAny.

globalAny.document = jsdom('');
globalAny.window = global.document.defaultView;

Answer 2

除了其他答案,您还可以直接在分配站点投射 global:

(global as any).myvar = myvar;

Answer 3

我这样解决了这个问题...

export interface Global {
  document: Document;
  window: Window;
}

declare var global: Global;

Answer 4

避免 typecasting any，它消除了打字的目的。而是安装所需的类型定义（例如yarn add --dev @types/jsdom @types/node）并导入以使用：

import { DOMWindow, JSDOM } from 'jsdom'

interface Global extends NodeJS.Global {
  window: DOMWindow,
  document: Document,
  navigator: {
    userAgent: string
  }
}

const globalNode: Global = {
  window: window,
  document: window.document,
  navigator: {
    userAgent: 'node.js',
  },
  ...global
}

Answer 5

这是正确的解决方案，而不是使用 Typescript 的命名空间。它还兼容所有 eslint 默认规则：

// Declare a type.
interface CustomNodeJsGlobal extends NodeJS.Global {
    myExtraGlobalVariable: number;
    // You can declare anything you need.
}

用它：

// Tell Typescript to use this type on the globally scoped `global` variable.
declare const global: CustomNodeJsGlobal;

function doSomething() {
  // Use it freely
  global.myExtraGlobalVariable = 5;
}

doSomething();

Answer 6

如何声明某事global

\n

\n
1. 创建global声明文件，例如：src/types/index.d.ts
\n
2. 将您的global声明文件添加到tsconfig.json：
\n

\n

{\n  "compilerOptions": {\n    /* ... */\n    "typeRoots": [\n      "./src/types",\n    ],\n    /* ... */\n  },\n  /* ... */\n}\n

\n

来自打字稿文档

\n

\n

您可以从模块内部将声明添加到全局范围

\n

\n

因此，例如，如果您想向数组接口添加一些额外的内容，您需要执行以下操作：

\n

observable.ts（例子）

\n

{\n  "compilerOptions": {\n    /* ... */\n    "typeRoots": [\n      "./src/types",\n    ],\n    /* ... */\n  },\n  /* ... */\n}\n

\n

src/types/index.d.ts

\n

// observable.ts\nexport class Observable<T> {\n  // ... still no implementation ...\n}\n

\n

someWhereInApp.ts

\n

declare global {\n  interface Array<T> {\n    toObservable(): Observable<T>;\n  }\n}\n

\n

声明变量以从中访问它们global

\n

如果你想添加一个全局变量来用作global.myVariable您需要执行的操作：

\n

src/types/index.d.ts

\n

Array.prototype.toObservable = function () {\n  // ...\n};\n

\n

someWhereInApp.ts

\n

/* eslint-disable no-var */\ndeclare global {\n/*  \xe2\x86\x93\xe2\x86\x93\xe2\x86\x93 "var" is important  */  \n    var myVariable: string[];\n}\n/* eslint-enable no-var */\n

\n