typescriptvuejs3vue-tsc

Avoid TS2571 when using $refs inside a template

Assuming SomeComp is a custom component exposing a function open, in a template I can do this:

    <button @click="$refs.someComp.open()">Open</button>
    <SomeComp ref="someComp" />

However when running type check, vue-tsc will fail with

TS2571: Object is of type 'unknown'

coplaining about the someComp ref. How do I resolve this? Can the type somehow be inferred or Do I have to declare it again? In a ref<>?

Solution

  • Yes, you need to define is as a ref.

    In script setup this would look like

    <script setup lang="ts">
  import {ref} from 'vue'
  let someComp = ref<SomeComp>();
</script>
<template>
    <button @click="someComp.open()">Open</button>
    <SomeComp ref="someComp" />
</template>

    Don't use $refs as it's untyped iirc