Vue3在script-setup中使用ref 和类型“never”上不存在属性“resetFields”错误

原创已于 2022-04-26 18:49:05 修改 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #setup ref

于 2022-04-26 18:34:39 首次发布

大前端专栏收录该内容

14 篇文章

订阅专栏

这篇博客探讨了在Vue中使用ArcoDesign组件库进行表单验证时遇到的类型错误问题。文章通过示例展示了如何初始化`ref`以避免`never`类型的`resetFields`属性错误。作者提供了两种解决方案，一是将`ruleForm`的类型声明为`any`，二是明确指定为`FormInstance`类型，从而确保`resetFields`方法可用。博客内容对于理解Vue和ArcoDesign的类型使用具有指导意义。

<a-form ref="ruleForm">
</a-form>

<script lang="ts" setup>
import { ref } from 'vue'

const ruleForm = ref()
const formSubmit = () => {
	ruleForm.value.validate()
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance } from '@arco-design/web-vue/es/form'

const ruleForm = ref<FormInstance>()
const formSubmit = () => {
	ruleForm.value.validate()
}
</script>

对于类型“never”上不存在属性“resetFields”错误

// 网上有这么一种写法
const ruleForm = ref(null)
// 此时ruleForm。value 的类型是never
// 所以就是报这个错误
// 上面两种方法都是可以避免的
const ruleForm = ref()
// 此时value的类型是any any.resetFields()是可以的
// 而第二种明确了具体类型也没有问题