typescript - Objektet kan möjligen vara 'null'. på en ref(null)

Att lära sig Vue Composition API (och TypeScript), från dokumentationen jag hittade, borde jag använda ref(null) för att använda i en subkomponent som jag har inuti <template>...</template>.

Denna delkomponent har metoder som open(), och jag använder den på detta sätt:

setup() {
    const subcomponentRef= ref(null);
    subcomponentRef.value.open();
    return { subcomponentRef };
}

Detta håller jag med om kan visa felet Object is possibly 'null'. riktat mot subcomponentRef.value, men det märkliga är att även om jag lade till ett villkor if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, visas felet fortfarande. Varför??

Försökte också komma åt det som subcomponentRef?.value?.open() men jag får detta fel Property 'open' does not exist on type 'never'..

Försökte också lägga till en Non-null assertion, som confirmation.value!.open(); och får samma fel Property 'open' does not exist on type 'never'..

Någon idé om vad som är fel här? Eller kanske istället för att använda ref(null) borde jag fördefiniera det med den faktiska komponenten? Men jag har ingen aning om hur man gör det korrekt, kan inte hitta det i dokumentationen.

Svar #1

Bra fråga! Jag hade samma problem som du och snubblade över det här svaret. Det som fungerade för mig var att definiera objektets form (ett TypeScript-gränssnitt), så att TS vet vad som finns där och vad som inte finns.

Att tillämpa denna kunskap på ditt exempel:

setup() {
    const subcomponentRef = ref(null)
    subcomponentRef.value.open() // TS error here
}

Blir :

setup() {
    const subcomponentRef = ref<null | { open: () => null }>(null)
    subcomponentRef.value?.open()
}

TS-felet är nu borta eftersom:

  • Typescript vet att funktionen open är tillgänglig på subcomponentRef eftersom vi deklarerade den i förväg
  • Med valfri kedjning säger vi till Typescript att inte leta vidare när subcomponentRef.value är null eller undefined.

Vanligtvis finns dessa gränssnitt redan tillgängliga någonstans och behöver inte skapas manuellt. Så i mitt fall behövde jag bara använda QInput-gränssnittet från quasar för att undvika TS-felet att resetValidation inte är tillgängligt:

import { QInput } from 'quasar'

const driverIdInput = ref<QInput>()
driverIdInput.value?.resetValidation()

Jag hoppas att detta hjälper till att klargöra saker och undvika dessa elaka misstag.

Svar #2

Tack för din hjälp med detta. Här är min förenklade lösning för att fokusera ett input-element i Vue 3 Composition API, med Typescript:

<template>
   <input ref="inputField">
</template>

const inputField = ref(null)
inputField.value.focus()      // ERROR:  TS2531: Object is possibly 'null'

Lösning:

const inputField = ref<null | { focus: () => null }>(null)
if(inputField.value) {    
    inputField.value.focus()
}

Säkerställer att en fokuseringsfunktion är definierad.

Relaterade artiklar