对象可能为“空".在 ref(null) 上 [英] Object is possibly 'null'. on a ref(null)
问题描述
Learning Vue Composition API(和 TypeScript)，从我找到的文档中，我应该使用 ref(null) 由我在 中的子组件使用...</template>.
Learning Vue Composition API (and TypeScript), from the docs I found, I should be using ref(null) to use by a sub component I have inside <template>...</template>.
这个子组件有像 open() 这样的方法，我是这样访问它的:
This subcomponent have methods like open(), and I'm accessing it like this:
setup() {
const subcomponentRef= ref(null);
subcomponentRef.value.open();
return { subcomponentRef };
}
这我同意可能会显示错误Object可能是'null'.指向subcomponentRef.value，但奇怪的是即使我添加了条件if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }，它仍然显示该错误.为什么??
This I agree may show the error Object is possibly 'null'. pointed to subcomponentRef.value, but the weird thing is even if I added a condition if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, it still shows that error. Why??
还尝试像 subcomponentRef?.value?.open() 一样访问它，但我收到此错误 属性 'open' 在类型 'never' 上不存在..
Also tried accessing it like subcomponentRef?.value?.open() but I receive this error Property 'open' does not exist on type 'never'..
还尝试添加一个非空断言，例如confirmation.value!.open(); 并收到相同的错误 Property 'open' does not exist输入从不"..
Also tried adding a Non-null assertions, like confirmation.value!.open(); and receives same error Property 'open' does not exist on type 'never'..
知道这里有什么问题吗?或者不使用 ref(null)，我应该用实际的组件预定义它?但我不知道如何正确地做到这一点，在文档中找不到.
Any idea what's wrong here? or maybe instead of using ref(null), I should predefine it with the actual component? but I don't have idea how to do that correctly, can't find in docs.
推荐答案
好问题！我和你有同样的问题，偶然发现了这个 answer.对我有用的是定义对象的形状(打字稿界面)，这样 TS 就知道什么是存在的，什么不存在.
Great question! I had the same issue as you and stumbled upon this answer. What worked for me was defining the shape of the object (a typescript interface), so TS knows what is there and what isn't.
将这些知识应用到您的示例中:
Applying this knowledge to your example:
setup() {
const subcomponentRef = ref(null)
subcomponentRef.value.open() // TS error here
}
变成:
setup() {
const subcomponentRef = ref<null | { open: () => null }>(null)
subcomponentRef.value?.open()
}
TS 错误现在消失了，因为:
The TS error is now gone because:
- Typescript 知道函数
open在subcomponentRef上可用，因为我们提前声明 - 使用可选链接 当
subcomponentRef.value为null或undefined时，我们告诉 Typescript 不要再看下去.
- Typescript knows the function
openis available onsubcomponentRefbecause we declared it upfront - With optional chaining we tell Typescript not to look further when
subcomponentRef.valueisnullorundefined.
通常这些接口已经在某处提供了，不需要手动创建.所以在我的情况下，我只需要使用 quasar 的 QInput 接口来避免 resetValidation 的 TS 错误不可用:
Usually these interfaces are already provided somewhere and don't need to be created manually. So in my case I just had to use the QInput interface from quasar to avoid the TS error of resetValidation not being available:
import { QInput } from 'quasar'
const driverIdInput = ref<QInput>()
driverIdInput.value?.resetValidation()
我希望这有助于澄清问题并避免这些令人讨厌的错误.
I hope this helps to clear things up and avoid these nasty errors.
这篇关于对象可能为“空".在 ref(null) 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
