Jak jawnie ustawić nową właściwość na `window` w TypeScript?

Konfiguruję globalne przestrzenie nazw dla moich obiektów, ustawiając jawnie właściwość na window.

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

TypeScript podkreśla MyNamespacei narzeka, że:

Właściwość „MyNamespace” nie istnieje dla wartości typu „window” any ”

Mogę sprawić, aby kod działał, deklarując MyNamespacejako zmienną otoczenia i usuwając windowjawność, ale nie chcę tego robić.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Jak mogę windowtam pozostać i sprawić, że TypeScript będzie szczęśliwy?

Na marginesie uważam za szczególnie zabawne, że narzeka TypeScript, ponieważ mówi mi, że windowjest to typ, anyktóry zdecydowanie może zawierać wszystko.

Właśnie znalazłem odpowiedź na to pytanie w odpowiedzi na inne pytanie StackOverflow .

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

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

Zasadniczo musisz rozszerzyć istniejący windowinterfejs, aby poinformować go o swojej nowej właściwości.

Aby zachować dynamikę, po prostu użyj:

(<any>window).MyNamespace

STANU TYPU ^ 3.4.3 TO ROZWIĄZANIE NIE DZIAŁA DŁUGO

Lub...

możesz po prostu wpisać:

window['MyNamespace']

i nie pojawi się błąd kompilacji i działa tak samo jak pisanie window.MyNamespace

Używasz TSX? Żadna z pozostałych odpowiedzi nie działała dla mnie.

Oto co zrobiłem:

(window as any).MyNamespace

Zaakceptowałem odpowiedź, z której korzystałem, ale z TypeScript 0.9. * To już nie działa. Nowa definicja Windowinterfejsu wydaje się całkowicie zastępować wbudowaną definicję, zamiast ją rozszerzać.

Zamiast tego zdecydowałem się to zrobić:

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

declare var window: MyWindow;

AKTUALIZACJA: Z TypeScript 0.9.5 zaakceptowana odpowiedź znów działa.

Globalne są „złe” :), myślę, że najlepszym sposobem na przeniesienie jest:

Najpierw eksportujesz interfejs: (np .: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Drugi import

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

Trzecie rzutowanie globalnego okna var z CustomWindow

declare let window: CustomWindow;

W ten sposób nie masz czerwonej linii w innym IDE, jeśli używasz z istniejącymi atrybutami obiektu okna, więc na koniec spróbuj:

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

Testowane z Typescript 2.4.x i nowszymi!

Jeśli chcesz rozszerzyć windowobiekt o niestandardowy typ, który wymaga użycia import, możesz użyć następującej metody:

Window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Zobacz „Globalne rozszerzanie” w sekcji „Łączenie deklaracji” w podręczniku: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Dla osób korzystających z Angular CLI jest to proste:

src / polyfills.ts

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

my-custom-utils.ts

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

Jeśli używasz IntelliJ, musisz także zmienić następujące ustawienie w IDE przed pobraniem nowych wielopełniaczy:

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

Nie muszę tego robić zbyt często, jedynym przypadkiem było użycie Redux Devtools z oprogramowaniem pośrednim.

Po prostu zrobiłem:

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

Lub możesz zrobić:

let myWindow = window as any;

i wtedy myWindow.myProp = 'my value';

Większość innych odpowiedzi nie jest idealna.

• Niektóre z nich po prostu tłumią wnioskowanie o typie dla sklepu.
• Niektóre inne dbają tylko o zmienną globalną jako przestrzeń nazw, ale nie jako interfejs / klasę

Podobny problem napotykam także dziś rano. Próbowałem tak wielu „rozwiązań” na SO, ale żadne z nich nie generuje absolutnie żadnego błędu typu i włącza wyzwalanie skoków typów w IDE (burza internetowa lub vscode).

Wreszcie stąd

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

, Znajduję rozsądne rozwiązanie, aby dołączyć typy dla zmiennej globalnej, która działa zarówno jako interfejs / klasa, jak i przestrzeń nazw .

Przykład jest poniżej:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Teraz powyższy kod łączy typy przestrzeni nazw MyNamespacei interfejsu MyNamespacew zmienną globalną myNamespace(właściwość okna).

Po znalezieniu odpowiedzi uważam, że ta strona może być pomocna. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Nie jestem pewien historii łączenia deklaracji, ale wyjaśnia, dlaczego poniższe działania mogą działać.

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

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

Oto jak to zrobić, jeśli używasz Menedżera definicji TypeScript !

npm install typings --global

Utwórz typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Zainstaluj niestandardowe pisanie:

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

Gotowe, użyj go‌ ! Maszynopis nie będzie już narzekał:

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

Maszynopis nie wykonuje kontroli typu we właściwościach łańcucha.

window["newProperty"] = customObj;

Najlepiej byłoby uniknąć scenariusza zmiennej globalnej. Czasami używam go do debugowania obiektu w konsoli przeglądarki.

Utwórz plik o nazwie global.d.tsnp. /src/@types/global.d.tsNastępnie zdefiniuj interfejs, taki jak:

interface Window {
  myLib: any
}

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

Jeśli używasz Typescript 3.x, możesz pominąć declare globalczęść w innych odpowiedziach, a zamiast tego użyć:

interface Window {
  someValue: string
  another: boolean
}

Działa to ze mną podczas korzystania z Typescript 3.3, WebPack i TSLint.

Dla odniesienia (to jest poprawna odpowiedź):

Wewnątrz .d.tspliku definicji

type MyGlobalFunctionType = (name: string) => void

Jeśli pracujesz w przeglądarce, dodajesz członków do kontekstu okna przeglądarki, ponownie otwierając interfejs Windows:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Ten sam pomysł dla NodeJS:

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

Teraz zadeklarujesz zmienną główną (która faktycznie będzie działać w oknie lub globalnie)

declare const myGlobalFunction: MyGlobalFunctionType;

Następnie w zwykłym .tspliku, ale zaimportowanym jako efekt uboczny, faktycznie go implementujesz:

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

I w końcu użyj go gdzie indziej w bazie kodu, albo:

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

myGlobalFunction("Kevin");

Utwórz niestandardowy interfejs rozszerza okno i dodaj niestandardową właściwość jako opcjonalną.

Następnie pozwól customWindow, które korzystają z niestandardowego interfejsu, ale wyceniane w oryginalnym oknie.

Działa z [email protected].

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Dla tych, którzy chcą ustawić obliczoną lub dynamiczną właściwość windowobiektu, przekonasz się, że ta declare globalmetoda nie jest możliwa . Wyjaśnienie dla tego przypadku użycia

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

Możesz spróbować zrobić coś takiego

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

Powyższe spowoduje błąd. Wynika to z faktu, że w Typescript interfejsy nie działają dobrze z obliczonymi właściwościami i generują błąd podobny do tego

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

Aby obejść ten problem, można przejść z sugerować odlewania windowdo <any>tak można zrobić

(window as any)[DynamicObject.key]

Za pomocą create-React-app v3.3 znalazłem najłatwiejszy sposób na osiągnięcie tego celu, aby rozszerzyć Windowtyp w generowanym automatycznie react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Najpierw musisz zadeklarować obiekt okna w bieżącym zakresie.
Ponieważ maszynopis chciałby poznać typ obiektu.
Ponieważ obiekt okna jest zdefiniowany gdzie indziej, nie można go przedefiniować.
Ale możesz to zadeklarować w następujący sposób:

declare var window: any;

To nie przedefiniuje obiektu okna lub nie utworzy innej zmiennej o nazwie window.
Oznacza to, że okno jest zdefiniowane gdzie indziej i po prostu odwołujesz się do niego w bieżącym zakresie.

Następnie możesz odwołać się do obiektu MyNamespace po prostu przez: -

window.MyNamespace

Lub możesz ustawić nową właściwość na windowobiekcie po prostu przez: -

window.MyNamespace = MyObject

A teraz maszynopis nie będzie narzekał.

Chciałem użyć tego dzisiaj w bibliotece Angular (6) i zajęło mi to trochę czasu, aby to zadziałało zgodnie z oczekiwaniami.

Aby moja biblioteka mogła korzystać z deklaracji, musiałem użyć d.ts rozszerzenia dla pliku deklarującego nowe właściwości obiektu globalnego.

Ostatecznie plik skończył się tak:

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

Po utworzeniu nie zapomnij go ujawnić w swoim public_api.ts .

To mi zrobiło. Mam nadzieję że to pomoże.