Problem with types with ts, useStorage (vueuse) and Pinia

Question

I'm getting a weird error in the following code: Property 'length' does not exist on type '{ [RefSymbol]: true; }'.

But when I check the type of foo in the getCount function my IDE tels me its of type Foo[]. What am I doing wrong?

import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

interface Foo {}

export const useFooStore = defineStore('foo', {
  state: () => ({
    foo: useStorage('foo', [] as Foo[]),
  }),
  actions: {
    getCount() {
      return this.foo.length; //Here's the error
    },
  },
});

Metameric

Your code seems to show no type errors (if I provide a type for Job). Can you create a minimal example that demonstrates the problem> – Sikorski

@AlexWayne That's very weird. I changed it to the minimal reproducible code that you asked for... but it looks a lot like what you wrote, without errors. My IDE isn't showing any errors, only when I try to compile the typescript it happens. – Metameric

Answer 1

I think the return value of useStorage isn't what you think. I believe it returns a ref, of sorts, with a value property that contains the actual data being stored.

Try:

useStorage('jobs', [] as Job[]).value

Sikorski

Yes it does, but that's what I need it to be. In the actions part I expect to be able to work on the value though – Metameric

Answer 2

Now there is not very much info in your post but from what the error message says I'd guess the following. You are defining an object with the type

{ [RefSymbol]: true; }

but as length does not exist on your type I think an array is beeing expected for jobs?

Farcy

Yes, my IDE tells me its an array of type Job... but the ts compiler thinks differently – Metameric

My IDE isn't showing any errors, but the website isn't running – Metameric

Answer 3

When I prepend the line with the error with

/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
return this.foo.length; //Here used to be the error

Then it suddenly works. It's hella ugly, but it works

Metameric