typescript - TypeScript で「ウィンドウ」に新しいプロパティを明示的に設定するにはどうすればよいですか?

Question

のプロパティを明示的に設定して、オブジェクトのグローバル名前空間をセットアップしますwindow。

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

TypeScript は次のことを強調MyNamespaceし、不平を言います。

プロパティ 'MyNamespace' はタイプ 'window' の値に存在しません

MyNamespaceアンビエント変数として宣言し、window明示性を削除することでコードを機能させることができますが、それはしたくありません。

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

どうすればwindowそこにとどまり、TypeScriptを満足させることができますか?

window補足として、TypeScript が文句を言うのは特に面白いと思いますany。

score 1128 · Accepted Answer

別の Stack Overflow question's answerでこれに対する答えを見つけました。

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

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

基本的に、既存のインターフェースを拡張してwindow、新しいプロパティについて伝える必要があります。

score 515 · Accepted Answer

動的に保つには、次を使用します。

(<any>window).MyNamespace

これは TSX では機能しない可能性があることに注意してください。これは、コンパイラが<any>を TSX 要素と見なす可能性があるためです。TSX と互換性のある型アサーションについては、この回答を確認してください。

score 267 · Accepted Answer

Svelte または TSX を使用していますか? 他の答えはどれも私にとってはうまくいきませんでした。

これが私がしたことです：

(window as any).MyNamespace

score 223 · Accepted Answer

TypeScript ^3.4.3 以降、このソリューションは機能しなくなりました

または...

次のように入力するだけです。

window['MyNamespace']

また、コンパイルエラーは発生せず、と入力するのと同じように機能しますwindow.MyNamespace。

score 81 · Accepted Answer

受け入れられた答えは私が使用していたものですが、TypeScript 0.9.* では機能しなくなりました。インターフェイスの新しい定義はWindow、組み込みの定義を拡張するのではなく、完全に置き換えているようです。

代わりにこれを行うことにしました：

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

declare var window: MyWindow;

更新: TypeScript 0.9.5 では、受け入れられた回答が再び機能しています。

score 14 · Accepted Answer

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

終わり！これを使って！TypeScript はもう文句を言いません:

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

score 14 · Accepted Answer

TypeScript 3.x を使用している場合はdeclare global、他の回答の一部を省略して、代わりに次のものを使用できる場合があります。

interface Window {
  someValue: string
  another: boolean
}

TypeScript 3.3、Webpack、およびTSLintを使用している場合、これは私と一緒に機能しました。

score 13 · Accepted Answer

使用する

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

文字列プロパティを使用しているので問題ありませんが、ウィンドウを分離してコードを整理したい場合は、ウィンドウオブジェクトを拡張できます。

interface MyNamespacedWindow extends Window {
    MyNamespace: object;
}

declare var window: MyNamespacedWindow;

score 9 · Accepted Answer

参考までに（これが正解です）：

.d.ts定義ファイル内

type MyGlobalFunctionType = (name: string) => void

ブラウザーで作業している場合は、ウィンドウのインターフェイスを再度開いて、メンバーをブラウザーのウィンドウコンテキストに追加します。

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Node.js の同じ考え方:

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType
  }
}

次に、ルート変数を宣言します (実際にはウィンドウまたはグローバルに存在します)。

declare const myGlobalFunction: MyGlobalFunctionType;

次に、通常の.tsファイルで、ただし副作用としてインポートされ、実際に実装します。

global/* or window */.myGlobalFunction = function (name: string) {
  console.log("Hey !", name);
};

そして最後に、コードベースの他の場所で、次のいずれかで使用します。

global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");

28 に答える 28