TypeScriptを使用するように既存のプロジェクトを変換しようとしましたが、テストのセットアップで問題が発生しました。
テスト中にすべてのDOM相互作用コードが機能するように、jsdomをセットアップするテスト用のセットアップファイルがありました。 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/');
これをTypeScriptファイルの先頭に置きます
const globalAny:any = global;
次に、代わりにglobalAnyを使用します。
globalAny.document = jsdom('');
globalAny.window = global.document.defaultView;
型の安全性を維持したい場合は、既存のNodeJS.Global
型定義を拡張できます。
グローバルスコープdeclare global {...}
内に定義を配置する必要があります
TypeScript global
スコープはNodeJSインターフェースGlobal
、またはglobal
型のGlobal
と呼ばれるノードglobal property
と同じではないことに注意してください...
declare global {
namespace NodeJS {
interface Global {
document: Document;
window: Window;
navigator: Navigator;
}
}
他の回答に加えて、割り当てサイトで直接 castglobal
を使用することもできます。
(global as any).myvar = myvar;
これを行うことでこの問題を修正しました...
export interface Global {
document: Document;
window: Window;
}
declare var global: Global;
型キャスト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
}
declare namespace NodeJS {
export interface Global { window: any;
}
}