Logo

dev-resources.site

for different kinds of informations.

STOP USING window as any

Published at
5/9/2022
Categories
typescript
global
window
Author
zapkub
Categories
3 categories in total
typescript
open
global
open
window
open
Author
6 person written this
zapkub
open
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!

global Article's
30 articles in total
Favicon
An Overview of AWS Global Infrastructure Part-1
Favicon
How to Safeguard Your Business with a Reliable Crypto Payment Gateway?
Favicon
BRICS Forum in Moscow as Global South Showcase
Favicon
Shocking Details About Alleged Bucha Atrocities
Favicon
Premier agency for Recruitment Process Outsourcing (RPO) services
Favicon
How I can get away with never installing npm packages globally
Favicon
Problemas com Variáveis Globais: Prós e contra
Favicon
Anticipated Sustained Growth in the Global eCommerce Market Throughout 2023
Favicon
A Journey Through Blogging Stats, Trends, and Predictions
Favicon
Nguyễn Hải SEO là ai ?
Favicon
Know about us! RELIANOID
Favicon
Understanding the Difference between nonlocal and global in Python
Favicon
Boost Your Productivity with These 15 Flow Launcher Hacks
Favicon
Git: Ignoring Files
Favicon
Vim Global Command
Favicon
Week #2&3: Still learning
Favicon
Week #1: Procrastination
Favicon
Week #5: Calm
Favicon
Week #4: Without progress
Favicon
Laravel Scout: Create A Global Search
Favicon
Developer Nation Pulse Report 22nd edition is out NOW
Favicon
It this global cricis make any effect for developer's
Favicon
STOP USING window as any
Favicon
Global trends in the fashion industry
Favicon
The incredible power of Deno Deploy
Favicon
Why you need the Cloud Pt3
Favicon
Localize Your Content And Succeed Globally
Favicon
Redux — React state management techniques with chocolate milk
Favicon
The Global market - joining the dots
Favicon
Top 9 Software Companies around the world.

Featured ones: