Typescript error on computed array property: "Property 'map' does not exist on type 'ComputedRef<any>"

Question

I have a computed property (array) which is taken from another computed property.

When trying to use map/filter/reduce/find on the property, it causes the linting error:

Property 'map' does not exist on type 'ComputedRef<any>

So how do I declare that computed property in the correct way? I'm using Vue 3 (composition api) with Typescript and Volar (for vscode).

const product = reactive({});            //<-- empty until it is loaded

const getItem = computed(() => {
  return items.map( (item:any) => {      //<-- typescript error
    return item;                   //(simplified code, returns 1 item in reality)
})

const items = computed(() => {
  return product?.items;                //<-- items array        
});

I also tried

const items = computed<any[]>(() => {

which causes the same error (on getItem function).

And this:

const items:any[] = computed<any[]>(() => {

which causes error on "items" that says Type 'ComputedRef<any>' is missing the following properties from type 'any[]': length, pop(..etc)

k.tten · Accepted Answer · 2022-09-14 14:53:50Z

3

Computed refs have a value prop that allow you to access the ref's, well, value.

So you would actually use it like this:

const product = reactive({});

const getItem = computed(() => {
  return items.value.map((item:any) => {
    return item;
  });
});

const items = computed(() => {
  return product?.items;     
});

edited Sep 14, 2022 at 14:53

answered Sep 14, 2022 at 14:36

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Galivan Over a year ago

That does work, but I thought I didn't need it when using "reactive"? This code works without using "value": const test1 = reactive({ myProp: 'okay' }); const getProp = computed(() => test1.myProp); So do I have to use ".value" if accessing an array or something that is not a primitive value?

k.tten Over a year ago

@Galivan Sorry, I meant to say "computed refs". Only computed refs seem to require the value prop.

Galivan Over a year ago

But why does the code snippet work then? (adding ".value" to that snippet causes error) Is it because the computed property was referencing a computed property? I can add the snippet to the question

k.tten Over a year ago

@Galivan You aren't using the computed ref getProp, you're using the reactive value test1.

Galivan Over a year ago

Okay great, I got it now , thanks!

Collectives™ on Stack Overflow

Typescript error on computed array property: "Property 'map' does not exist on type 'ComputedRef<any>"

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related