Obiekt prawdopodobnie ma wartość „null”. na ref (null)

Question

Nauka Vue Composition API (i TypeScript), z dokumentów, które znalazłem, powinienem używać ref(null)do użycia przez składnik podrzędny, który mam w środku <template>...</template>.

Ten podskładnik ma metody takie jak open(), a ja uzyskuję do niego dostęp w następujący sposób:

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

Zgadzam się, że może to Object is possibly 'null'.wskazywać na wskazany błąd subcomponentRef.value, ale dziwne jest to, że nawet jeśli dodałem warunek if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, nadal pokazuje ten błąd. Czemu??

Próbowałem też uzyskać do niego dostęp, subcomponentRef?.value?.open()ale otrzymuję ten błąd Property 'open' does not exist on type 'never'..

Próbowano również dodać niezerowe potwierdzenia , takie jak confirmation.value!.open();i otrzymuje ten sam błąd Property 'open' does not exist on type 'never'..

Masz jakiś pomysł, co tu jest nie tak? a może zamiast używać ref(null), powinienem wstępnie zdefiniować to z rzeczywistym komponentem? ale nie mam pojęcia, jak to zrobić poprawnie, nie mogę znaleźć w dokumentach.

Answer 1

Świetne pytanie! Miałem ten sam problem co Ty i natknąłem się na tę odpowiedź . U mnie zadziałało zdefiniowanie kształtu obiektu (interfejs maszynopisu), więc TS wie, co tam jest, a czego nie.

Zastosuj tę wiedzę do twojego przykładu:

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

Staje się:

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

Błąd TS zniknął, ponieważ:

• Maszynopis wie, że funkcja openjest dostępna, subcomponentRefponieważ zadeklarowaliśmy ją z góry
• Z opcjonalnym łańcuchem mówimy Typescript, aby nie szukał dalej, kiedy subcomponentRef.valuejest nulllub undefined.

Zazwyczaj te interfejsy są już gdzieś udostępnione i nie trzeba ich tworzyć ręcznie. Więc w moim przypadku musiałem po prostu użyć QInputinterfejsu z, quasaraby uniknąć błędu TS związanego z resetValidationniedostępnością:

import { QInput } from 'quasar'

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

Mam nadzieję, że pomoże to wyjaśnić sytuację i uniknąć tych paskudnych błędów.

Answer 2

Należy użyć typu części użyciem typeof yourComponentlub nullnastępnie użyć ?do dostępu do metod / właściwości:

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