Vue 3 - Typescript - 对象可能为空问题答案

【问题标题】：Vue 3 - Typescript - Object is possibly null issueVue 3 - Typescript - 对象可能为空问题
【发布时间】：2021-12-01 20:34:59
【问题描述】：

我检查了其他线程，但找不到解决方案。

setup() {
  const processingData = ref(null)
}

功能：

function create() {
  let field = JSON.parse(processingData.value.fields)

  for (let i = 0; i < field.length; i++) {
    console.log(i)
  }
}

JSON.parse(processingData.value.fields) 出错：Object is possibly 'null'.Vetur(2531) const processingData: Ref<null>

processingData 是 100% 可访问的，因为它已经被另一个函数设置了。

【问题讨论】：

create 函数，是否在 setup() 中定义？
尝试在create函数内的第一行打印processingData.value并检查它是否包含称为字段的属性？
是的，该函数在 setup() 中。如果我 console.log(processingData.value)。它提供了一个带有 set: 字段的对象。所以应该工作。但在我看来，它是 TypeScript，它是标准的 null。不知道如何处理这个错误。
正如您所说，您确实看到了一个带有 set: 字段的对象，您是否看到字段的任何值？
是的，我看到了价值。这是 JSON。

【解决方案1】：

在 Typescript 中，您可以添加一个 Non-null assertion operator 以让您的代码知道在您使用它时该值不会为空：

let field = JSON.parse(processingData.value!.fields)

这应该会有所帮助。但正如我所见，您的 processingData 没有类型。这将导致另一个问题。 TS 找不到属性字段。因此，要么将其解析为 any，要么将类型添加到您的 ref。

参考类型：

setup() {
  const processingData: Ref<{ fields: any }> = ref({fields: null})
}
...
let field = JSON.parse(processingData.value!.fields)

或将其解析为：

let field = JSON.parse((processingData.value as any).fields)

否则，您可以在逻辑上确保该值不为空。

if(processingData.value){
  field = JSON.parse(processingData.value.fields) 
}

【讨论】：