Come estendere l'interfaccia dattilografica 'Finestra'

Question

Nel mio esempio, sto cercando di estendere l'interfaccia TS Window per includere un polyfill per fetch. Perché non importa. La domanda è: "Come faccio a dire che TS window.fetch è una funzione valida?"

sto facendo questo in codice VS, v.0.3.0, che è in esecuzione TS v.1.5 (IIRC).

dichiarando l'interfaccia dentro il mio file di classe TS dove voglio usarlo non funziona:

///<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 

ma va bene se dichiaro questa stessa interfaccia in un separato ".d.ts" file e fare riferimento a esso nel mio file di classe TS.

qui è "tipizzazioni/window.extend.d.ts"

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

Ora posso usarlo nella mia TS file di classe:

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

In alternativa, posso scrivere un'interfaccia che si estende con un altro nome nel mio file di classe TS e quindi utilizzarlo in un cast:

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

Perché l'estensione dell'interfaccia funziona in "d.ts" ma non in loco?

Devo davvero passare attraverso queste rotazioni?

Answer 1

Quando si ha un livello superiore import o export nel file (che si deve da qualche parte per essere avere questo problema), il file è un modulo esterno .

In un modulo esterno, la dichiarazione di un'interfaccia crea sempre un nuovo tipo anziché aumentare un'interfaccia globale esistente. Ciò simula il comportamento generale dei caricatori di moduli: le cose dichiarate in questo file non si fondono o interferiscono con le cose nell'ambito globale.

Il motivo di questa rotazione è che altrimenti non ci sarebbe un modo per, in un modulo esterno, definire nuove variabili o tipi con lo stesso nome di quelli nell'ambito globale.

Answer 2

è necessario il declare global

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

Questo funziona allora:

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