Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`useStorage` got ts error TS2339

See original GitHub issue

In my nuxt 2 project

import { computed, Ref } from '@vue/composition-api'
import { useWindowSize, createGlobalState, useStorage } from '@vueuse/core'

export const useVerticalSizeState = createGlobalState(() =>
  useStorage(
    'use-vertical-size',
    {
      aspectRatio: 9 / 16,
    },
    sessionStorage,
  ),
)

export function useVerticalSize() {
  const { width: windowWidth, height: windowHeight } = useWindowSize()
  const state = useVerticalSizeState()

  const aspectRatio = computed(() => state.value.aspectRatio)
  const width = computed(() =>
    Math.min(windowWidth.value, windowHeight.value * aspectRatio.value),
  )
  const height = computed(() => windowHeight.value)
  const setAspectRatio = (aspectRatio: Ref<number>) => {
    state.value.aspectRatio = aspectRatio.value
  }

  return {
    width,
    height,
    aspectRatio,
    setAspectRatio,
  }
}

got this error

ERROR in utils/useVerticalSize.ts:21:44
TS2339: Property 'value' does not exist on type 'Omit<Ref<{ aspectRatio: number; }>, "value">'.
    19 |   const state = useVerticalSizeState()
    20 |
  > 21 |   const aspectRatio = computed(() => state.value.aspectRatio)
       |                                            ^^^^^
    22 |   const width = computed(() =>
    23 |     Math.min(windowWidth.value, windowHeight.value * aspectRatio.value),
    24 |   )

ERROR in utils/useVerticalSize.ts:27:11
TS2339: Property 'value' does not exist on type 'Omit<Ref<{ aspectRatio: number; }>, "value">'.
    25 |   const height = computed(() => windowHeight.value)
    26 |   const setAspectRatio = (aspectRatio: Ref<number>) => {
  > 27 |     state.value.aspectRatio = aspectRatio.value
       |           ^^^^^
    28 |   }
    29 |
    30 |   return {

obviously the problem lies in my editor’s inability to correctly interpret RemoveableRef but I don’t want to overwrite the definition to solve the problem

19 |  const state = useVerticalSizeState()

I need a hint…this is my tsconfig.json

{
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "declaration": true,
    "declarationDir": "./types",
    "resolveJsonModule": true,
    "rootDir": ".",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios",
      "@nuxtjs/auth-next",
      "@nuxtjs/dayjs",
      "nuxt-i18n",
      "vuetify",
      "animejs"
    ],
    "typeRoots": ["./node_modules/@types", "./node_modules/vuetify/types"]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}