web-dev-qa-db-ja.com

「ウィンドウ」TypeScriptインターフェースを拡張する方法

私の例では、fetchのポリフィルを含めるようにTSウィンドウインターフェイスを拡張しようとしています。どうでもいいんです。問題は、「TSにwindow.fetchは有効な関数ですか？ "

TS v.1.5（IIRC）を実行しているVS Code v.0.3.0でこれを行っています。

使用したいTSクラスファイル内のインターフェイスを宣言しても機能しません。

///<reference path="typings/tsd.d.ts"/>

interface Window {
  fetch:(url: string, options?: {}) => Promise<any>
}
...
window.fetch('/blah').then(...); // TS objects that window doesn't have fetch

しかし、この同じインターフェイスを別の ".d.ts"ファイルで宣言して、TSクラスファイルで参照しても問題ありません。

これが「typings/window.extend.d.ts」です

///<reference path="es6-promise/es6-promise"/>
interface Window {
  fetch:(url: string, options?: {}) => Promise<any>
}

これで、TSクラスファイルで使用できます。

///<reference path="typings/window.extend.d.ts"/>
...
window.fetch('/blah').then(...); // OK

または、TSクラスファイルに拡張インターフェイス別の名前を記述して、キャストで使用することもできます。

interface WindowX extends Window {
  fetch:(url: string, options?: {}) => Promise<any>
}
...
(<WindowX> window).fetch('/blah').then(...); // OK

インターフェイスの拡張が「d.ts」で機能するが、機能しない理由in sit？

本当にこれらの旋回を行わなければならないのですか？

typescripttypescript1.5fetch-api
24
Ward

declare globalが必要です

declare global {
  interface Window {
    fetch:(url: string, options?: {}) => Promise<any>
  }
}

これはその後機能します：

window.fetch('/blah').then(...);
25
Julian

トップレベルのimportまたはexportがファイルにある場合（この問題が発生するにはどこかにある必要があります）、ファイルは外部モジュールです。

外部モジュールでは、インターフェースを宣言すると、既存のグローバルインターフェースが拡張されるのではなく、常に新しいタイプが作成されます。これは、モジュールローダーの一般的な動作を模倣します。このファイルで宣言されたものは、グローバルスコープ内のものとマージまたは干渉しません。

この旋回の理由は、そうしないと、外部モジュールで、グローバルスコープと同じ名前の新しい変数または型を定義する方法がないためです。

16
Ryan Cavanaugh