Me pregunto por qué mi ref a un botón simple no funcionará en mecanografiado. Creé un botón simple y una constante y luego, cuando se monta el componente, compruebo si la referencia es null o no. de lo contrario, deshabilite el botón ...
Aquí está el código de ejemplo:
<template> <input v-model="phone" type="text" /> <button ref="phoneSubmitBtn" type="button" disabled>تایید</button> </template> <script lang="ts" setup> import { Ref, ref, watch, onMounted } from 'vue'; const phoneSubmitBtn: Ref<HTMLButtonElement>|Ref<null> = ref(null); let phone: Ref<string> | Ref<null> = ref(null); onMounted(() => { if (phoneSubmitBtn.value === null) { return false } watch(phone, () => { if (phone.value !== null && phone.value.length === 11) { phoneSubmitBtn.value.disabled = false; } else{ phoneSubmitBtn.value.disabled = true; } }) }) </script> Nota: la lógica funciona bien y todo funciona también, pero VSCODE me dice que phoneSubmitBtn.value.disabled: Property 'value' does not exist on type 'never'.ts(2339) dentro de la sección de observación.
phoneSubmitBtn está escrito incorrectamente, se reduce a Ref<null> en la asignación porque es una constante, por lo que el tipo de phoneSubmitBtn.value es null .
Debería haber sido:
const phoneSubmitBtn: Ref<HTMLButtonElement | null> = ref(null); Dado que ref es un tipo de variable genérico, se puede inferir:
const phoneSubmitBtn = ref<HTMLButtonElement | null>(null);