Objek mungkin 'null'. di ref (null)

Question

Learning Vue Composition API (dan TypeScript), dari dokumen yang saya temukan, seharusnya saya gunakan ref(null)untuk digunakan oleh sub komponen yang saya miliki di dalamnya <template>...</template>.

Subkomponen ini memiliki metode seperti open(), dan saya mengaksesnya seperti ini:

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

Saya setuju ini mungkin menunjukkan kesalahan yang Object is possibly 'null'.ditunjukkan subcomponentRef.value, tetapi yang aneh adalah meskipun saya menambahkan kondisi if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, itu masih menunjukkan kesalahan itu. Mengapa??

Juga mencoba mengaksesnya seperti subcomponentRef?.value?.open()tetapi saya menerima kesalahan ini Property 'open' does not exist on type 'never'..

Juga mencoba menambahkan pernyataan Non-null , seperti confirmation.value!.open();dan menerima kesalahan yang sama Property 'open' does not exist on type 'never'..

Tahu apa yang salah di sini? atau mungkin alih-alih menggunakan ref(null), saya harus mendefinisikannya dengan komponen sebenarnya? tetapi saya tidak tahu bagaimana melakukannya dengan benar, tidak dapat menemukannya di dokumen.

Answer 1

Pertanyaan bagus! Saya memiliki masalah yang sama seperti Anda dan menemukan jawaban ini . Apa yang berhasil bagi saya adalah mendefinisikan bentuk objek (antarmuka skrip), jadi TS tahu apa yang ada dan apa yang tidak.

Menerapkan pengetahuan ini pada contoh Anda:

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

Menjadi:

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

Kesalahan TS sekarang hilang karena:

• Ketik tahu fungsi opentersedia di subcomponentRefkarena kami mendeklarasikannya di awal
• Dengan chaining opsional kami kirim Naskah yang diketik tidak melihat lebih jauh saat subcomponentRef.valueini nullatau undefined.

Biasanya antarmuka ini sudah tersedia di suatu tempat dan tidak perlu dibuat secara manual. Jadi dalam kasus saya, saya hanya perlu menggunakan QInputantarmuka dari quasaruntuk menghindari kesalahan TS karena resetValidationtidak tersedia:

import { QInput } from 'quasar'

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

Saya harap ini membantu untuk menjernihkan dan menghindari kesalahan parah ini.

Answer 2

Anda harus menggunakan tipe komponen menggunakan typeof yourComponentatau nullkemudian gunakan ?untuk mengakses metode / properti:

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