Come si imposta esplicitamente una nuova proprietà su `window` in TypeScript?

Ho impostato spazi dei nomi globali per i miei oggetti impostando esplicitamente una proprietà su window.

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

TypeScript sottolinea MyNamespacee si lamenta che:

La proprietà 'MyNamespace' non esiste sul valore di tipo 'window' any "

Posso far funzionare il codice dichiarando MyNamespacecome una variabile ambientale e rilasciando l' windowesplicito, ma non voglio farlo.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Come posso rimanere windowlì e rendere felice TypeScript?

Come nota a margine, trovo particolarmente divertente che TypeScript si lamenti dal momento che mi dice che windowè di tipo anyche sicuramente può contenere qualsiasi cosa.

Ho appena trovato la risposta a questa domanda in un'altra risposta StackOverflow .

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

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

Fondamentalmente devi estendere l' windowinterfaccia esistente per parlarne della tua nuova proprietà.

Per mantenerlo dinamico, basta usare:

(<any>window).MyNamespace

A PARTIRE DA TYPESCRIPT ^ 3.4.3 QUESTA SOLUZIONE NON FUNZIONA PIÙ

O...

puoi semplicemente digitare:

window['MyNamespace']

e non otterrai un errore di compilazione e funziona come la digitazione window.MyNamespace

Usando TSX? Nessuna delle altre risposte funzionava per me.

Ecco cosa ho fatto:

(window as any).MyNamespace

La risposta accettata è quella che utilizzavo, ma con TypeScript 0.9. * Non funziona più. La nuova definizione diWindow dell'interfaccia sembra sostituire completamente la definizione integrata, anziché aumentarla.

Ho preso invece a fare questo:

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

declare var window: MyWindow;

AGGIORNAMENTO: con TypeScript 0.9.5 la risposta accettata funziona di nuovo.

I Global sono "cattivi" :), penso che il modo migliore per avere anche la portabilità sia:

Per prima cosa esporti l'interfaccia: (es.: ./Custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Secondo, importa

import {CustomWindow} from './custom.window.ts';

Terza finestra var globale con CustomWindow

declare let window: CustomWindow;

In questo modo non hai anche una linea rossa in IDE diversi se usi con attributi esistenti di oggetto finestra, quindi alla fine prova:

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

Testato con Typescript 2.4.xe più recente!

Se è necessario estendere l' windowoggetto con un tipo personalizzato che richiede l'utilizzo, importè possibile utilizzare il seguente metodo:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Vedi "Miglioramento globale" nella sezione "Unione delle dichiarazioni" del manuale: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Per coloro che usano la CLI angolare è semplice:

src / polyfills.ts

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

my-custom-utils.ts

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

Se stai usando IntelliJ, devi anche modificare le seguenti impostazioni nell'IDE prima che i tuoi nuovi polyfill prendano:

> File 
> Settings 
> Languages & Frameworks 
> TypeScript 
> check 'Use TypeScript Service'.

Non ho bisogno di farlo molto spesso, l'unico caso che ho avuto è stato quando ho usato Redux Devtools con il middleware.

Ho semplicemente fatto:

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Oppure potresti fare:

let myWindow = window as any;

e poi myWindow.myProp = 'my value';

La maggior parte delle altre risposte non sono perfette.

• Alcuni di loro semplicemente sopprimono l'inferenza di tipo per il negozio.
• Alcuni altri si preoccupano solo della variabile globale come spazio dei nomi, ma non come interfaccia / classe

Ho anche riscontrato il problema simile questa mattina. Ho provato così tante "soluzioni" su SO, ma nessuna di esse non produce assolutamente alcun errore di tipo e abilita l'attivazione del salto di tipo in IDE (webstorm o vscode).

Finalmente da qui

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

, Trovo una soluzione ragionevole per collegare le tipizzazioni per la variabile globale che funge sia da interfaccia / classe sia da spazio dei nomi .

L'esempio è sotto:

// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Ora, il codice sopra unisce le tipizzazioni dello spazio dei nomi MyNamespacee dell'interfaccia MyNamespacenella variabile globale myNamespace(la proprietà della finestra).

Dopo aver trovato le risposte, penso che questa pagina possa essere utile. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Non sono sicuro della storia della fusione delle dichiarazioni, ma spiega perché ciò che segue potrebbe funzionare.

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

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

Ecco come farlo, se stai usando TypeScript Definition Manager !

npm install typings --global

Creare typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Installa la tua digitazione personalizzata:

typings install file:typings/custom/window.d.ts --save --global

Fatto, usalo‌ ! Typescript non si lamenterà più:

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

Typscript non esegue il typecheck sulle proprietà della stringa.

window["newProperty"] = customObj;

Idealmente, lo scenario variabile globale dovrebbe essere evitato. Lo uso a volte per eseguire il debug di un oggetto nella console del browser.

Crea un file chiamato global.d.tsad es. /src/@types/global.d.tsQuindi definisci un'interfaccia come:

interface Window {
  myLib: any
}

rif: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Se stai usando Typescript 3.x, potresti essere in grado di omettere la declare globalparte nelle altre risposte e invece usare semplicemente:

interface Window {
  someValue: string
  another: boolean
}

Questo ha funzionato con me durante l'utilizzo di Typescript 3.3, WebPack e TSLint.

Per riferimento (questa è la risposta corretta):

All'interno di un .d.tsfile di definizione

type MyGlobalFunctionType = (name: string) => void

Se lavori nel browser, aggiungi membri al contesto della finestra del browser riaprendo l'interfaccia di Windows:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Stessa idea per NodeJS:

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

Ora dichiari la variabile radice (che in realtà vivrà su finestra o globale)

declare const myGlobalFunction: MyGlobalFunctionType;

Quindi in un .tsfile normale , ma importato come effetto collaterale, lo si implementa effettivamente:

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

E infine usalo altrove nel codebase, con uno dei due:

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

myGlobalFunction("Kevin");

Crea un'interfaccia personalizzata estende la finestra e aggiungi la tua proprietà personalizzata come facoltativa.

Quindi, lascia che la CustomWindow utilizzi l'interfaccia personalizzata, ma che sia valutata con la finestra originale.

Ha funzionato con il typescript@3.1.3.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Per coloro che desiderano impostare una proprietà calcolata o dinamica windowsull'oggetto, questo non sarà possibile con il declare globalmetodo. Per chiarire questo caso d'uso

window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature

Potresti provare a fare qualcosa del genere

declare global {
  interface Window {
    [DyanmicObject.key]: string; // error RIP
  }
}

Quanto sopra sarà comunque un errore. Questo perché in Typescript, le interfacce non giocano bene con le proprietà calcolate e generano un errore simile

A computed property name in an interface must directly refer to a built-in symbol

Per ovviare a questo, puoi andare con il suggerimento di lanciare windowin <any>modo da poterlo fare

(window as any)[DynamicObject.key]

Usando create -eagire-app v3.3 ho trovato il modo più semplice per raggiungere questo obiettivo era estendere il Windowtipo in auto-generato react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Innanzitutto è necessario dichiarare l'oggetto finestra nell'ambito corrente.
Perché il dattiloscritto vorrebbe conoscere il tipo di oggetto.
Poiché l'oggetto finestra è definito altrove, non è possibile ridefinirlo.
Ma puoi dichiararlo come segue: -

declare var window: any;

Ciò non ridefinirà l'oggetto finestra o non creerà un'altra variabile con nome window.
Ciò significa che la finestra è definita da qualche altra parte e la si sta semplicemente facendo riferimento nell'ambito corrente.

Quindi puoi fare riferimento al tuo oggetto MyNamespace semplicemente: -

window.MyNamespace

Oppure puoi impostare la nuova proprietà windowsull'oggetto semplicemente: -

window.MyNamespace = MyObject

E ora il dattiloscritto non si lamenterà.

Volevo usarlo oggi in una libreria Angular (6) e mi ci è voluto un po 'per farlo funzionare come previsto.

Affinché la mia libreria potesse usare le dichiarazioni, ho dovuto usare l' d.tsestensione per il file che dichiara le nuove proprietà dell'oggetto globale.

Quindi alla fine, il file è finito con qualcosa del tipo:

/path-to-angular-workspace/angular-workspace/projects/angular-library/src/globals.d.ts

Una volta creato, non dimenticare di esporlo nel tuo public_api.ts.

Che ha fatto per me. Spero che sia di aiuto.