L'oggetto è probabilmente "nullo". su un riferimento (null)

Question

Apprendimento dell'API di composizione di Vue (e TypeScript), dai documenti che ho trovato, dovrei usare ref(null)per utilizzare un sottocomponente che ho dentro <template>...</template>.

Questo sottocomponente ha metodi come open()e ci sto accedendo in questo modo:

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

Questo sono d'accordo potrebbe mostrare l'errore Object is possibly 'null'.indicato subcomponentRef.value, ma la cosa strana è che anche se ho aggiunto una condizione if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, mostra ancora quell'errore. Perché??

subcomponentRef?.value?.open()Ho anche provato ad accedervi come ma ricevo questo errore Property 'open' does not exist on type 'never'..

Ho anche provato ad aggiungere un'asserzione non nulla , come confirmation.value!.open();e riceve lo stesso errore Property 'open' does not exist on type 'never'..

Qualche idea su cosa c'è che non va qui? o forse invece di usarlo ref(null), dovrei predefinirlo con il componente effettivo? ma non ho idea di come farlo correttamente, non riesco a trovare nei documenti.

Answer 1

Ottima domanda! Ho avuto il tuo stesso problema e sono incappato in questa risposta . Ciò che ha funzionato per me è stata definire la forma dell'oggetto (un'interfaccia dattiloscritta), quindi TS sa cosa c'è e cosa no.

Applicando questa conoscenza al tuo esempio:

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

Diventa:

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

L'errore TS è ora scomparso perché:

• Typescript sa che la funzione openè disponibile subcomponentRefperché l'abbiamo dichiarata in anticipo
• Con il concatenamento opzionale diciamo a Typescript di non cercare oltre quando subcomponentRef.valueè nullo undefined.

Di solito queste interfacce sono già fornite da qualche parte e non devono essere create manualmente. Quindi nel mio caso dovevo solo usare l' QInputinterfaccia da quasarper evitare l'errore di TS di resetValidationnon essere disponibile:

import { QInput } from 'quasar'

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

Spero che questo aiuti a chiarire le cose ed evitare questi fastidiosi errori.

Answer 2

È necessario utilizzare il tipo di componente utilizzando typeof yourComponento nullquindi utilizzare ?per accedere a metodi / proprietà:

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