vue3 + ts + element-plus ref获取节点报错 Property ‘xxx‘ does not exist on type ‘HTMLElement‘

 

这样获取元素节点，虽然可以编译成功，但是会有红色下划线，很碍眼

报错信息提示类型“HtmleElement”上不存在属性“resetFields”

 

解决方法：

1.可以吧类型定义成any ，但是不推荐这样做 

 

2.在vue的官方文档中Typescript支持里有告诉我们一个获取组件类型的方法，InstanceType<typeof 组件名称> ，使用方式如下代码

<template>
                <el-form
                    ref="refRuleForm"
                    :model="ruleForm"
                    status-icon
                    label-position="top"
                    class="demo-ruleForm"
                >
                    <el-form-item label="用户名" prop="username">
                        <el-input
                            v-model="ruleForm.username"
                            type="password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input
                            v-model="ruleForm.pass"
                            type="password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item style="text-align : left">
                        <el-button type="primary" @click="submitForm"
                            >登录</el-button
                        >
                        <el-button @click="resetForm">清空</el-button>
                    </el-form-item>
                </el-form>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref } from 'vue'
    import {ElForm} from "element-plus"
    export default defineComponent({
        setup(){
            const ruleForm = reactive({
                pass: '',
                username: '',
            })
            const refRuleForm = ref<InstanceType<typeof ElForm>>()
            const resetForm = ():void => {
                refRuleForm.value?.resetFields()
            }
            return {
                refRuleForm,
                resetForm 
            }
        }
    })
</script>