L'objet est peut-être «nul». sur une ref (null)

Question

Apprendre l'API Vue Composition (et TypeScript), à partir des documents que j'ai trouvés, je devrais utiliser ref(null)pour utiliser par un sous-composant que j'ai à l'intérieur <template>...</template>.

Ce sous-composant a des méthodes comme open(), et j'y accède comme ceci:

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

Cela, je suis d'accord, peut montrer l'erreur Object is possibly 'null'.pointée subcomponentRef.value, mais la chose étrange est que même si j'ai ajouté une condition if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, cela montre toujours cette erreur. Pourquoi??

subcomponentRef?.value?.open()J'ai également essayé d'y accéder, mais je reçois cette erreur Property 'open' does not exist on type 'never'..

Également essayé d'ajouter des assertions non nulles , comme confirmation.value!.open();et reçoit la même erreur Property 'open' does not exist on type 'never'..

Une idée de ce qui ne va pas ici? ou peut-être au lieu d'utiliser ref(null), je devrais le prédéfinir avec le composant réel? mais je ne sais pas comment faire cela correctement, je ne trouve pas dans la documentation.

Answer 1

Excellente question! J'ai eu le même problème que vous et je suis tombé sur cette réponse . Ce qui a fonctionné pour moi a été de définir la forme de l'objet (une interface dactylographiée), afin que TS sache ce qui est là et ce qui ne l'est pas.

Application de ces connaissances à votre exemple:

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

Devient:

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

L'erreur TS a maintenant disparu car:

• Typescript sait que la fonction openest disponible sur subcomponentRefcar nous l'avons déclarée à l'avance
• Avec le chaînage facultatif, nous disons à Typescript de ne pas chercher plus loin quand subcomponentRef.valueest nullou undefined.

Habituellement, ces interfaces sont déjà fournies quelque part et n'ont pas besoin d'être créées manuellement. Donc, dans mon cas, je devais simplement utiliser l' QInputinterface de quasarpour éviter l'erreur TS de resetValidationne pas être disponible:

import { QInput } from 'quasar'

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

J'espère que cela aidera à clarifier les choses et à éviter ces mauvaises erreurs.

Answer 2

Vous devez utiliser le type de composant en utilisant typeof yourComponentou nullpuis utiliser ?pour accéder aux méthodes / propriétés:

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