TypeScriptの `window`に新しいプロパティを明示的に設定するにはどうすればよいですか？

にプロパティを明示的に設定することにより、オブジェクトのグローバル名前空間を設定しますwindow。

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

TypeScriptは次のことを強調しMyNamespace、不満を述べています：

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

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

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

どのように私windowはそこに留まり、TypeScriptを幸せにすることができますか？

余談ですが、TypeScript windowはany間違いなく何かを含むことができる型であると告げるので、TypeScriptが文句を言うのは特に面白いと思います。

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を使用した3番目のキャストグローバル変数ウィンドウ

declare let window: CustomWindow;

このように、ウィンドウオブジェクトの既存の属性を使用する場合、別のIDEに赤い線が表示されないので、最後に次のことを試してください。

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

Typescript 2.4.x以降でテスト済み！

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

Angular CLIを使用している人にとっては簡単です：

src / polyfills.ts

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

my-custom-utils.ts

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

IntelliJを使用している場合は、新しいポリフィルをピックアップする前に、IDEで次の設定を変更する必要もあります。

> 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';

他の答えのほとんどは完璧ではありません。

• それらのいくつかは単にショップの型推論を抑制します。
• 他の一部はグローバル変数のみをネームスペースとして扱い、インターフェース/クラスとしては扱いません

今朝も同様の問題に遭遇しました。私は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（ウィンドウのプロパティ）にマージします。

周りの答えを見つけた後、このページは役に立つかもしれません。 https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation 宣言のマージの履歴は不明ですが、以下が機能する理由を説明しています。

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

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

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

Typscriptは文字列プロパティのタイプチェックを実行しません。

window["newProperty"] = customObj;

理想的には、グローバル変数シナリオは回避する必要があります。ブラウザコンソールでオブジェクトをデバッグするために時々使用します。

global.d.tsたとえば/src/@types/global.d.ts、次のようなインターフェイスを定義するというファイルを作成します。

interface Window {
  myLib: any
}

ref：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

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

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

NodeJSの同じアイデア：

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

カスタムインターフェイスを作成してウィンドウを拡張し、カスタムプロパティをオプションとして追加します。

次に、カスタムインターフェースを使用する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;
}

最初に、現在のスコープでウィンドウオブジェクトを宣言する必要があります。
typescriptはオブジェクトのタイプを知りたいからです。
ウィンドウオブジェクトは他の場所で定義されているため、再定義できません。
ただし、次のように宣言できます。

declare var window: any;

これはウィンドウオブジェクトを再定義しないか、名前を持つ別の変数を作成しません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。

それは私のためにそれをしました。お役に立てれば。