How do you explicitly set a new property on window in TypeScript

Question

I setup global namespaces for my objects by explicitly setting a property on window   window MyNamespace   window MyNamespace          TypeScript underlines MyNamespace and complains that      The property  MyNamespace  does not exist on value of type  window    any    I can make the code work by declaring MyNamespace as an ambient variable and dropping the window explicitness but I don t want to do that   declare var MyNamespace  any   MyNamespace   MyNamespace          How can I keep window in there and make TypeScript happy   As a side note I find it especially funny that TypeScript complains since it tells me that window is of type any which by definitely can contain anything

User · Answer

Most of the other answers are not perfect.

Some of them just suppress the type inference for show.
Some of the others only care about global variables as namespaces, but not as interfaces/classes

I also encounter the similar problem this morning. I tried so many "solutions" on StackOverflow, but none of them produced absolutely no type errors and enabled triggering type jumping in IDE(webstorm or vscode).

Finally, from here

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

I found a reasonable solution to attach typings for a global variable that acts as interface/class and namespace both.

Example is below:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

The code above merges the typings of namespace MyNamespace and interface MyNamespace into the global variable myNamespace(the property of window).

User · Answer

If you need to extend the window object with a custom type that requires the use of import you can use the following method   window d ts  import MyInterface from    MyInterface    declare global       interface Window           propName  MyInterface           See  Global Augmentation  in the  Declaration Merging  section of the Handbook  https   www typescriptlang org docs handbook declaration-merging html global-augmentation

User · Answer

Create a file called global d ts e g  src  types global d ts then define an interface like   interface Window     myLib  any     ref  https   www typescriptlang org docs handbook declaration-files templates global-d-ts html

User · Answer

For those using the Angular CLI it s straightforward   src polyfills ts  declare global     interface Window       myCustomFn       gt  void          my-custom-utils ts  window myCustomFn   function                 If you re using IntelliJ  you also needed to change the following setting in the IDE before your new polyfills pick up    gt  File   gt  Settings   gt  Languages  amp  Frameworks   gt  TypeScript   gt  check  Use TypeScript Service

User · Answer

If you are using Typescript 3 x  you may be able to omit the declare global part in the other answers and instead just use   interface Window     someValue  string   another  boolean     This worked with me when using Typescript 3 3  WebPack and TSLint

User · Answer

Typscript does not perform typecheck on  string properties   window  newProperty     customObj    Ideally  the global variable scenario should be avoided  I use it sometimes to debug an object in browser console

User · Answer

Just found the answer to this in another StackOverflow question s answer   declare global       interface Window   MyNamespace  any       window MyNamespace   window MyNamespace          Basically you need to extend the existing window interface to tell it about your new property

User · Answer

Using create-react-app v3 3 I found the easiest way to achieve this was to extend the Window type in the auto-generated react-app-env d ts   interface Window       MyNamespace  any

User · Answer

From version 3 4  TypeScript has supported globalThis  https   www typescriptlang org docs handbook release-notes typescript-3-4 html type-checking-for-globalthis  From the above link      in a global file  var abc   100     Refers to  abc  from above  globalThis abc   200   A  quot global quot  file is the file which does not have an import export statement  So declaration var abc  can be written in  d ts

User · Answer

I don t need to do this very often  the only case I have had was when using Redux Devtools with middleware   I simply did   const composeEnhancers    window as any    REDUX DEVTOOLS EXTENSION COMPOSE      compose    Or you could do   let myWindow   window as any   and then myWindow myProp    my value

User · Answer

Global are  evil      i think the best way to have also the portability is   First you export the interface   eg    custom window ts   export interface CustomWindow extends Window       customAttribute  any      Second you import  import  CustomWindow  from    custom window ts     Third cast global var window with CustomWindow  declare let window  CustomWindow    In this way you don t have also red line in different IDE if you use with existent attributes of window object  so at the end try   window customAttribute    works   window location href     works     Tested with Typescript 2 4 x and newest

User · Answer

For those who want to set a computed or dynamic property on the window object  you ll find that not possible with the declare global method  To clarify for this use case  window DynamicObject key     Element implicitly has an  any  type because type Window has no index signature   You might attempt to do something like this  declare global     interface Window        DyanmicObject key   string     error RIP         The above will error though  This is because in Typescript  interfaces do not play well with computed properties and will throw an error like  A computed property name in an interface must directly refer to a built-in symbol   To get around this  you can go with the suggest of casting window to  lt any gt  so you can do   window as any  DynamicObject key

User · Answer

typescript prevent accessing object without assigning type that has the desired property or already assigned to any so you can use optional chaining  window  MyNamespace     value

User · Answer

Using Svelte or TSX   None of the other answers were working for me  Here s what I did   window as any  MyNamespace

User · Answer

Using window  quot MyNamespace quot     window  quot MyNamespace quot           should be alright as using string property  but if you really want to have a separated window and organised your code  you can extends window object  interface MyNamespacedWindow extends Window       MyNamespace  object     declare var window  MyNamespacedWindow

User · Answer

After finding answers around  I think this page might be helpful  https   www typescriptlang org docs handbook declaration-merging html global-augmentation Not sure about the history of declaration merging  but it explains why the following could work   declare global       interface Window   MyNamespace  any       window MyNamespace   window MyNamespace

User · Answer

I wanted to use this in an Angular  6  library today and it took me a while to get this to work as expected    In order for my library to use declarations I had to use the d ts extention for the file that declares the new properties of the global object    So in the end  the file ended up with something like    path-to-angular-workspace angular-workspace projects angular-library src globals d ts  Once created  don t forget to expose it in your public api ts   That did it for me  Hope this helps

User · Answer

First you need to declare the window object in current scope   Because typescript would like to know the type of the object   Since window object is defined somewhere else you can not redefine it   But you can declare it as follows -  declare var window  any    This will not redefine the window object or it will not create another variable with name window   This means window is defined somewhere else and you are just referencing it in current scope   Then you can refer to your MyNamespace object simply by -   window MyNamespace   Or you can set the new property on window object simply by -  window MyNamespace   MyObject   And now the typescript won t complain

User · Answer

To keep it dynamic  just use   window as any  MyNamespace

User · Answer

The accepted answer is what I used to use  but with TypeScript 0 9   it no longer works  The new definition of the Window interface seems to completely replace the built-in definition  instead of augmenting it   I have taken to doing this instead   interface MyWindow extends Window       myFunction    void     declare var window  MyWindow    UPDATE  With TypeScript 0 9 5 the accepted answer is working again

User · Answer

For reference  this is the correct answer    Inside a  d ts definition file  type MyGlobalFunctionType    name  string    gt  void   If you work in the browser   you add members to the browser s window context by reopening Window s interface   interface Window     myGlobalFunction  MyGlobalFunctionType     Same idea for NodeJS   declare module NodeJS     interface Global       myGlobalFunction  MyGlobalFunctionType         Now you declare the root variable  that will actually live on window or global   declare const myGlobalFunction  MyGlobalFunctionType    Then in a regular  ts file  but imported as side-effect  you actually implement it   global   or window    myGlobalFunction   function  name  string      console log  Hey     name        And finally use it elsewhere in the codebase  with either   global   or window    myGlobalFunction  Kevin     myGlobalFunction  Kevin

User · Answer

AS OF TYPESCRIPT  3 4 3 THIS SOLUTION NO LONGER WORKS  Or     you can just type   window  MyNamespace     and you wont get a compile error and it works the same as typing window MyNamespace

User · Answer

Make a custom interface extends the Window and add your custom property as optional    Then  let the customWindow that use the custom interface  but valued with the original window    It s worked with the typescript 3 1 3   interface ICustomWindow extends Window     MyNamespace   any    const customWindow ICustomWindow   window   customWindow MyNamespace   customWindow MyNamespace

User · Answer

Here s how to do it  if you re using TypeScript Definition Manager   npm install typings --global   Create typings custom window d ts   interface Window     MyNamespace  any     declare var window  Window    Install your custom typing     typings install file typings custom window d ts --save --global   Done  use it zwnj   Typescript won t complain anymore   window MyNamespace   window MyNamespace

[typescript] How do you explicitly set a new property on `window` in TypeScript?

Examples related to typescript