DEV Community

Rungsikorn Rungsikavanich
Rungsikorn Rungsikavanich

Posted on

STOP USING window as any

TLDR;

for someone who have a limit of time



// instead of this
(window as any).MY_GREETING_MESSAGE = 'Hi Earth!'
// do this
declare global {
    interface Window { 
         MY_GREETING_MESSAGE: string
    }
}
window.MY_GREETING_MESSAGE = 'Hi Earth!'


Enter fullscreen mode Exit fullscreen mode

You guys typescripter might came across the situation that you need to put something into a global scope variable like window

For javascript you may easily put something into it without any complicated step like.



// running in browser
window.MY_GREETING_MESSAGE = 'Hi Earth!'


Enter fullscreen mode Exit fullscreen mode

but as Typescript which will do some type checking if any object attribute you are working on is really existed in the view of the static type language. you will be forbidden to do this directly.



window.MY_GREETING_MESSAGE = 'Hi Earth!'
// ^^
// Property 'MY_GREETING_MESSAGE' does not exist on type 'Window & typeof globalThis'.ts(2339)


Enter fullscreen mode Exit fullscreen mode

Why?

The answer is pretty straight, because the interface Window which declare for this global window variable does not have MY_GREETING_MESSAGE property

Image description

Here come the window as any

for most of new Typescript developer may unable to solve this issue and put this dirty workaround like explicitly cast window to any which means we will access window without any type safety and no type checking in the runtime!



(window as any).MY_GREETING_MESSAGE = 'Hi Earth!'


Enter fullscreen mode Exit fullscreen mode

Bring back the type

As window has been declared by the standard Ambient type from Typescript library. The better approach is to extend this type like this



declare global {
    interface Window { 
         MY_GREETING_MESSAGE: string
    }
}
window.MY_GREETING_MESSAGE = 'Hi Earth!'


Enter fullscreen mode Exit fullscreen mode

and this will let Typescript recognize the property you want to put into the ambient window object

Image description

noted that you need to make sure the value has been assigned before use, or you may make it as an optional property

Happy Coding!

Top comments (0)