TypeScript报错：类型“HTMLElement”上不存在属性“XXX”

2024-06-14 149 阅读1分钟

问题

在使用TypeScript中，父组件调用子组件导出的方法，把ref的类型写成HTNLElement,导致调用方法时老是TS报错

如：子组件Children里面导出了一个 Sum 方法

<script setup lang="ts">
    const sum = () => 10 + 20
    defineExpose({
        sum
    })
</script>

父组件：

<template>
    <Children ref="childrenRef"></Children>
</template>
<script setup lang="ts">
    import Children from 'Children.vue';
    const childrenRef = ref<HTMLElement | null>(null)
    childrenRef.value!.sum()
</script>

然后TS就爆红了：类型“HTMLElement”上不存在属性“sum”

解决方法

类型定义：在父组件的 TypeScript 文件中，需要定义子组件的类型。可以使用 InstanceType 来获取子组件的实例类型，例如：

父组件：

<template>
    <Children ref="childrenRef"></Children>
</template>
<script setup lang="ts">
    import Children from 'Children.vue';
    const childrenRef = ref<InstanceType<typeof Children> | null>(null)
    childrenRef.value!.sum()
</script>