Question

I am having trouble with some defining issues with typescript in Vue. I am getting TS2339: Property product does not exist on type (LineItem[] | undefined)[K] . I am not sure if it doesn t like orderedItems : Array<LineItem> or if the way I am setting the ref value and using it in the component.

I notice that when I console log purchaseInfo.value?.orderedItems that deep object is still in a proxy and not unwrapped properly.

<script setup lang="ts">

interface LineItem {
   product : {
     id : number,
     sku : string,
     title : string,
     price : string,
     image : string,
     description : string,
  },
   quantity : number;
}

export interface PurchaseInfo {
   address : string,
   city : string,
   zipCode : string,
   orderedItems : Array<LineItem>,
   orderStatus : string
}

let purchaseInfo = ref<PurchaseInfo | undefined>();

onMounted(async () => {
  // this function fetchPurchaseInfo() returns a Promise<PurchaseInfo> which is return response.data as PurchaseInfo;
  purchaseInfo.value = await fetchPurchaseInfo() 
})

</script>

<template>
  <div v-if="purchaseInfo">
    <tr v-for="(item, index) in purchaseInfo?.orderedItems">
      <th scope="row">{{ index + 1 }}</th>
      <td>{{ item.quantity }}</td>
      <td>{{ item.product.title }}</td>
    </tr>
</div>
</template>

Answer 1

When you create a ref without initial value it is undefined by default. This also affects the type, so purchaseInfo is actually Ref<PurchaseInfo | undefined>.

So you just need a check in the template to handle the loading state, when purchaseInfo has no value yet:

<template>
  <table v-if="purchaseInfo">
    <tr v-for="(item, index) in purchaseInfo.orderedItems" />
  </table>
  <div v-else>
    You can put some loader here, or render nothing.
  </div>
</template>

Answer 2

I wish I can say what fixed this. It looks like the compiler kept picking up on something bad and decided to start building fine.

友情链接