带有 TypeScript 的 Vue 3 无法读取属性答案

【问题标题】：Vue 3 with TypeScript cannot read properties带有 TypeScript 的 Vue 3 无法读取属性
【发布时间】：2021-11-13 22:30:51
【问题描述】：

我在使用 Vue 3 和 TypeScript 时遇到了一些问题。我有一个属性“用户”是一个字符串，我从后端返回了对象，所以它坏了，我将属性类型更改为对象，但我仍然收到如下错误：

Uncaught (in promise) TypeError: Cannot read properties of null （阅读“电子邮件”）

我是这么称呼它的。

{{ item.user.email }}

其实在v-for中，真正的属性是items(array ofc)

所以在 props 中是 String，我把它改成了 object，像这样：

 props: {
    user: {
      type: Object,
      default: undefined
    },

我有类似的变压器：

const  gTransformer = (data: GResponse[]): CARD[]  => {
      console.info(data)
      return data.map((element, index): CARD => ({
          id: element.id,
          status: element.status,
          created_at: moment(element.created_at).toDate(),
          updated_at: moment(element.updated_at).toDate(),
          user: element.user
        })
      )

}

这就是 GResponse 界面的样子：

export interface GResponse {
  id: number;
  status: number;
  user: any;
  created_at: string,
  updated_at: string
}

和CARD接口是这样的：

export interface GiftCard {
  id: number;
  status: SomeEnum,
  user: any;
  created_at: Date,
  updated_at: Date
}

我在这里做错了什么？

【问题讨论】：

请提供可以重现问题的stackoverflow.com/help/mcve。后端发生了什么是未知的，并且代码没有包含关于前端发生什么的足够信息。这是运行时错误，因此 TS 类型无关紧要。

标签： javascript typescript vue.js

【解决方案1】：

在 Vue3 选项 API 中为 TypeScript 定义你的 prop 类型，如下所示：source

import { PropType } from 'vue'
...
props: {
  user: undefined as PropType<Object | undefined>
},

【讨论】：