Ways to specify DOM as potentially being undefined

Question

Ways to specify DOM as potentially being undefined

My team and I are currently in the process of building a new Vue SSR application using Nuxt within a monorepo setup. We have organized the Nuxt app as a package, with another package serving as our component library. While we are relatively new to Typescript, we managed to set up everything smoothly.

However, we encountered an issue: the component library needs to be SSR-friendly but should not have dependencies on Nuxt itself. In order to access window properties, I prefer using

if (typeof window !== 'undefined')

over if (process.browser). This leads me to wonder if it is possible to utilize Typescript and Eslint to generate an error when someone attempts to access window properties without verifying if they are defined first.

// Not SSR friendly
const halfWinHeight = window.innerHeight / 2

// SSR friendly
if (typeof window !== 'undefined') {
  const halfWinHeight = window.innerHeight / 2
}

I am aware that Typescript will throw an error if a union type like the following is utilized:

declare const window: {} | undefined

This would result in the desired error message Object is possibly 'undefined'.

https://i.sstatic.net/vSaLc.png

In essence, my goal is to avoid specifying all potential window and document properties individually. Instead, I am exploring the option of utilizing a lib such as DOM, but one that could potentially be undefined. The challenge lies in the fact that we only ascertain whether window is defined or not during runtime, so how can I provide it with a value to inform Typescript at compile time?

I am attempting to tackle this issue with Typescript, although there may be alternative approaches to consider. Any assistance on this matter would be immensely appreciated.

typescript vue.js nuxt.js server-side-rendering

Answer 1

Answer №1

Here is a potential solution:

Utilize the dom library to acquire the type declarations for window:

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom"]
  }
}

Develop a utility file that exports window, specifying it as typeof window | undefined:
```
// @/utils/window.ts
export default window as typeof window | undefined
```

In every file that references window (from dom), import the utility file as window to ensure that your custom typed version is used instead:

// MyFoo.vue
import window from '@/utils/window'

export default {
  mounted() {
    window.console.log('hi')  // ❌ Object is possibly 'undefined'
    ^^^^^^

    window?.console.log('hi') // ✅
  }
}

Answer 2

Here is a potential solution:

Utilize the dom library to acquire the type declarations for window:

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom"]
  }
}

Develop a utility file that exports window, specifying it as typeof window | undefined:
```
// @/utils/window.ts
export default window as typeof window | undefined
```

In every file that references window (from dom), import the utility file as window to ensure that your custom typed version is used instead:

// MyFoo.vue
import window from '@/utils/window'

export default {
  mounted() {
    window.console.log('hi')  // ❌ Object is possibly 'undefined'
    ^^^^^^

    window?.console.log('hi') // ✅
  }
}

Ways to specify DOM as potentially being undefined

Answer №1

Similar questions

Strange behavior observed with Nuxt Js asyncData method returning values

Can someone please provide guidance on how I can access the current view of a Kendo Scheduler when switching between views, such as day view or week

Error: The module parsing process failed due to the presence of an octal literal in strict mode. To resolve this issue,

Guidance on utilizing Vuetify's "Select" dropdown list in Nuxt.js and Vue.js

Typescript often fails to recognize that every code path within a function should return a value

Type definition for Vuex store functionality

Vite - Issue with Copying Static Files

In Vue, the concept of using the debounce method is not clearly defined

How can I retrieve a certain type of object property in TypeScript?

How to send parameters through the Google Maps API URL using Vue.js

Pinia seems to be failing to refresh and display the latest image

Utilize tags as properties in Vue.js by selecting them

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

VueJS 3 custom Checkbox fails to update UI upon clicking

Loading local HTML files in Vue 3 (Vite) iframe consistently defaults to displaying index.html

Chart rendering failure: unable to obtain context from the provided item

Issue arises when fastify/websocket is being used and an argument of type '{ websocket: boolean; }' is not compatible or able to be assigned to a parameter

Alter the color scheme of the material dialog's background

Unusual compilation issue encountered in Vue when trying to use a template for a slot

Can Nuxt accurately identify which page is accessing the /slug path?