Typescript Vue 3合成API从对象引用获取值

我有一个

ref

：

const editItem=ref（空）

下面是它的一个示例值：

{
id:1，
标题：《哈利波特》，
作者：“J.K.罗琳”，
创建：“30-08-2000”，
}

如果我运行

console.log（editItem.value）

，我会看到这个对象：

但是，当我尝试使用

console.log（editItem.value.author）

读取值的

author

时，我看到以下错误：

切切维奇·米哈尔

问题（没有看到代码）似乎是您正在使用ref作为对象值。虽然您可能会找到一些解决方法使其工作，但处理被动对象的最简单方法是使用

reactive

而不是

ref

另外一个好处是，在获取或设置对象值时，不需要使用

.value

。

CześćMichal

问题（没有看到代码）似乎是您正在使用ref作为对象值。虽然您可能会找到一些解决方法使其工作，但处理被动对象的最简单方法是使用

reactive

而不是

ref

---

另一个好处是，在获取或设置对象值时，不需要使用

.value

。

由于ref的类型是

object | null

，因此在访问它时它可能是

null

，从而导致运行时异常。错误消息是关于

editItem.value

的可能性的警告

您可以添加一个

null

-检查其访问权限：

if（editItem.value）{
console.log（editItem.value.author）
}

…或者您可以简单地使用：

console.log（editItem.value？.author）

但是您会注意到，您将得到一个不同的警告，提示

作者

不是

对象的签名的一部分。一种解决方案是将
ref
的类型从
对象更改为特定接口：

接口MyRef{
id：编号；
标题：字符串；
作者：字符串；
创建：字符串；
}
常量editItem=ref（空）
console.log（editItem.value？.author）✅
由于ref的类型是
object | null
，因此当您访问它时，它可能是
null
，导致运行时异常。错误消息是关于
editItem.value
的可能性的警告

您可以添加一个
null
-检查其访问权限：

if（editItem.value）{
console.log（editItem.value.author）
}

…或者您可以简单地使用：

console.log（editItem.value？.author）

但是您会注意到，您将得到一个不同的警告，提示
作者
不是
对象的签名的一部分。一种解决方案是将
ref
的类型从
对象更改为特定接口：

接口MyRef{
id：编号；
标题：字符串；
作者：字符串；
创建：字符串；
}
常量editItem=ref（空）
console.log（editItem.value？.author）✅
能否在codesandbox中提供一个示例？你可以丰富这个，你可以在codesandbox中提供一个例子吗？你可以丰富这个
Object is possibly 'null'.