Cum stabilești în mod explicit o nouă proprietate asupra `window` dactilografiat?

Pentru a păstra dinamic, trebuie doar să utilizați:

(<any>window).MyNamespace

Sau...

poți să scrii:

window['MyNamespace']

și vă obiceiul obține o eroare de compilare și funcționează la fel ca dactilografiere window.MyNamespace

Utilizarea TSX? Nici unul dintre celelalte răspunsuri au fost de lucru pentru mine.

Iată ce am făcut:

(window as any).MyNamespace

Răspunsul acceptat este ceea ce am folosit pentru a utiliza, dar cu typescript 0.9. * Ea nu mai funcționează. Noua definiție a Windowinterfeței pare să înlocuiască complet definiția încorporată, în loc să- l augmentarea.

Am luat pentru a face acest lucru în schimb:

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

declare var window: MyWindow;

UPDATE: Cu typescript 0.9.5 răspunsul acceptat este de lucru din nou.

Dacă trebuie să se extindă windowobiectul cu un tip personalizat , care necesită utilizarea , importputeți utiliza următoarea metodă:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

A se vedea „Global Mărirea“ în secțiunea „Declarația Fuzionarea“ a Manualului: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Global sunt „rele“ :), cred că cel mai bun mod de a avea, de asemenea, portabilitatea este:

Mai întâi exportați interfața: (ex: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

În al doilea rând importați

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

turnat A treia fereastră var la nivel mondial cu CustomWindow

declare let window: CustomWindow;

În acest fel nu trebuie, de asemenea, linia roșie în diferite IDE dacă utilizați cu atributele existente ale obiectului fereastră, astfel încât la sfârșitul încercați:

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

Testat cu 2.4.x typescript

Iată cum se face, dacă utilizați typescript Definiție Managerul !

npm install typings --global

Creați typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Instalați tastarea personalizat:

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

Efectuat, utilizați - l ! Typescript nu va mai plânge:

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

Nu am nevoie pentru a face acest lucru foarte des, singurul caz am avut a fost atunci când se utilizează Redux DevTools cu middleware.

pur și simplu am făcut:

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

Sau ai putea face:

let myWindow = window as any;

și apoi myWindow.myProp = 'my value';

Cele mai multe dintre celelalte răspunsuri nu sunt perfecte.

• Unii dintre ei suprima doar inferenta de tip pentru magazin.
• Unii dintre ceilalți îi pasă doar de variabilă la nivel mondial ca spațiu de nume, dar nu la fel de interfață / clasă

Am întâlni, de asemenea, problema similară în această dimineață. Am încercat atât de multe „soluții“ la SO, dar nici unul dintre ele produc nici o eroare de tip absolut și să permită declanșarea de tip sărituri în IDE (webstorm sau vscode).

În cele din urmă, de aici

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

, Mi se pare o soluție rezonabilă pentru a atașa typings pentru variabila la nivel mondial , care acționează ca interfață / clasă și spațiul de nume ambele .

Exemplu este de mai jos:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Acum, codul de mai sus îmbină typings de spațiu de nume MyNamespaceși de interfață MyNamespaceîn variabila globală myNamespace(proprietatea ferestrei).

Dacă utilizați Angular CLI este foarte simplu (testat pe RC.0 CLI):

src / polyfills.ts

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

mi-personalizate-utils.ts

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

Sunt folosind IntelliJ, așa că, de asemenea, am nevoie pentru a schimba următoarele setări în IDE înainte de noul meu polyfills luat:

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

Pentru cei care doresc să se stabilească o proprietate calculată sau dinamic pe windowobiect, veți găsi că nu este posibil cu declare globalmetoda. Pentru a clarifica acest caz de utilizare

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

S-ar putea încerca să facă ceva de genul asta

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

Cele de mai sus va eroare totuși. Acest lucru se datorează faptului că dactilografiat, interfețele nu joacă bine cu proprietăți calculate și va arunca o eroare de genul

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

Pentru a obține în jurul valorii de acest lucru, puteți merge cu Suggest de turnare windowpentru a <any>putea face

(window as any)[DynamicObject.key]

Faceți o interfață personalizată extinde fereastra și adăugați proprietatea dvs. personalizat ca opțional.

Apoi, lăsați customWindow care utilizează interfața personalizată, dar evaluate cu fereastra originală.

Este a lucrat cu typescript@3.1.3.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Am vrut să folosesc acest lucru într-un (6) biblioteca angular astăzi și mi-a luat un timp pentru a obține acest lucru cum era de așteptat.

Pentru biblioteca mea de a folosi declarații am avut de a utiliza d.tsprelungirea pentru fișierul care declară noile proprietăți ale obiectului global.

Deci, în final, dosarul a ajuns cu ceva de genul:

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

Odată create, nu uitați să - l expune în dumneavoastră public_api.ts.

Asta a făcut-o pentru mine. Sper că acest lucru vă ajută.

Pentru referință (acesta este răspunsul corect):

În interiorul unui .d.tsfișier de definire a

type MyGlobalFunctionType = (name: string) => void

Dacă lucrați în browser, adăugați membri în contextul ferestrei browserului prin redeschiderea interfeței Window lui:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Aceeași idee pentru NodeJS:

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

Acum declarați variabila rădăcină (care va trăi de fapt, pe fereastră sau la nivel mondial)

declare const myGlobalFunction: MyGlobalFunctionType;

Apoi , într - un mod regulat .tsfișier, dar importat ca efect secundar, îl pune în aplicare de fapt:

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

Și, în cele din urmă l utilizați în altă parte în codebase, fie cu:

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

myGlobalFunction("Kevin");

Dacă utilizați typescript 3.x, ați putea fi în măsură să omită o declare globalparte din celelalte răspunsuri și să utilizați doar:

interface Window {
  someValue: string
  another: boolean
}

Acest lucru a lucrat cu mine atunci când se utilizează typescript 3.3, WebPACK și TSLint.

Typscript nu efectuează typecheck pe proprietățile șir.

window["newProperty"] = customObj;

În mod ideal, scenariul de la nivel mondial variabilă ar trebui evitată. L folosesc, uneori, pentru a depana un obiect în consola de browser.

Mai întâi trebuie să declare obiect fereastra în domeniul de aplicare curent.
Deoarece dactilografiat ar dori să știe tipul obiectului.
Deoarece obiect fereastra este definit în altă parte nu se poate redefini.
Dar se poate declara , după cum urmează: -

declare var window: any;

Acest lucru nu va redefini obiectul ferestrei sau nu va crea o altă variabilă cu nume window.
Acest lucru înseamnă că fereastra este definit în altă parte și tu doar o referire în domeniul de aplicare curent.

Apoi, puteți face referire la obiectul de MyNamespace pur și simplu prin: -

window.MyNamespace

Și acum nu se va plânge Fișierul script.

După ce a găsi răspunsuri în jurul valorii de , cred că această pagină ar putea fi de ajutor. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Nu sunt sigur despre istoria declarației contopire, dar se explică de ce ar putea lucra următoarele.

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

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