Objekt ist möglicherweise 'null'. auf eine ref (null)

Nov 26 2020

Wenn ich die Vue Composition API (und TypeScript) anhand der gefundenen Dokumente lerne, sollte ich sie ref(null)für eine Unterkomponente verwenden, die ich in mir habe <template>...</template>.

Diese Unterkomponente verfügt über folgende Methoden open(), und ich greife folgendermaßen darauf zu:

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

Ich bin damit einverstanden, dass der Fehler angezeigt wird, auf den Object is possibly 'null'.hingewiesen wird subcomponentRef.value, aber das Seltsame ist, dass selbst wenn ich eine Bedingung hinzugefügt habe if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, dieser Fehler immer noch angezeigt wird. Warum??

subcomponentRef?.value?.open()Ich habe auch versucht, darauf zuzugreifen, aber ich erhalte diesen Fehler Property 'open' does not exist on type 'never'..

Es wurde auch versucht, Zusicherungen ungleich Null hinzuzufügen , wie confirmation.value!.open();und erhält denselben Fehler Property 'open' does not exist on type 'never'..

Irgendeine Idee, was hier falsch ist? oder vielleicht anstatt zu verwenden ref(null), sollte ich es mit der eigentlichen Komponente vordefinieren? aber ich habe keine Ahnung, wie man das richtig macht, kann nicht in Dokumenten finden.

Antworten

1 DarkLite1 Dec 02 2020 at 10:44

Gute Frage! Ich hatte das gleiche Problem wie Sie und bin auf diese Antwort gestoßen . Was für mich funktioniert hat, war die Definition der Form des Objekts (eine Typoskript-Schnittstelle), damit TS weiß, was da ist und was nicht.

Wenden Sie dieses Wissen auf Ihr Beispiel an:

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

Wird:

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

Der TS-Fehler ist jetzt verschwunden, weil:

  • Typescript weiß, dass die Funktion openverfügbar ist, subcomponentRefda wir sie im Voraus deklariert haben
  • Mit optionalen Verkettungs sagen wir Typoskript nicht weiter zu suchen , wenn subcomponentRef.valueist nulloder undefined.

Normalerweise sind diese Schnittstellen bereits irgendwo vorhanden und müssen nicht manuell erstellt werden. In meinem Fall musste ich nur die QInputSchnittstelle von verwenden quasar, um den TS-Fehler zu vermeiden, resetValidationnicht verfügbar zu sein:

import { QInput } from 'quasar'

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

Ich hoffe, dies hilft, die Dinge zu klären und diese bösen Fehler zu vermeiden.

BoussadjraBrahim Nov 26 2020 at 19:10

Sie sollten den Komponententyp verwenden typeof yourComponentoder nullverwenden, ?um auf Methoden / Eigenschaften zuzugreifen:

setup() {
    const subcomponentRef= ref < typeof subcomponent| null > (null);
    subcomponentRef.value?.open();
    return { subcomponentRef };
}