Vue+TypeScript接口定义报错TS2339及Ref代理未解包问题求助

一、TS类型错误（TS2339）解决 #

错误根源：外层v-if="purchaseInfo"已确保purchaseInfo存在，但v-for中使用purchaseInfo?.orderedItems会让TS保留orderedItems为undefined的可能性，导致item被推断为LineItem | undefined，访问item.product时触发类型校验错误。

解决方法二选一：

方法1：移除v-for中的可选链 #

结合外层的v-if判断，直接使用purchaseInfo.orderedItems，TS能正确推断item为LineItem类型：

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

方法2：给ref设置初始默认值 #

初始化时给purchaseInfo一个符合PurchaseInfo类型的空对象，从根源避免undefined类型：

let purchaseInfo = ref<PurchaseInfo>({
  address: '',
  city: '',
  zipCode: '',
  orderedItems: [],
  orderStatus: ''
});

此时template可去掉外层的v-if="purchaseInfo"，因为初始值已满足类型要求。

二、Proxy对象解包问题解决 #

Vue3中ref的value如果是对象/数组，会被自动转为reactive的Proxy包装对象，控制台显示Proxy属于正常响应式机制。若需查看原始数据，使用Vue提供的toRaw方法：

1. 导入toRaw：

import { toRaw } from 'vue';

2. 打印时调用toRaw获取原始对象：

onMounted(async () => {
  purchaseInfo.value = await fetchPurchaseInfo();
  console.log(toRaw(purchaseInfo.value.orderedItems));
});

注意：toRaw仅用于查看原始数据，不要修改其返回的对象，否则不会触发响应式视图更新。

内容的提问来源于stack exchange，提问作者Imposter