Đối tượng có thể là 'null'. trên một ref (null)

Question

Học API thành phần Vue (và TypeScript), từ các tài liệu tôi tìm thấy, tôi nên sử dụng ref(null)để sử dụng bởi một thành phần phụ mà tôi có bên trong <template>...</template>.

Thành phần con này có các phương thức như thế này open()và tôi đang truy cập nó như sau:

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

Điều này tôi đồng ý có thể hiển thị lỗi được Object is possibly 'null'.chỉ ra subcomponentRef.value, nhưng điều kỳ lạ là ngay cả khi tôi đã thêm một điều kiện if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }, nó vẫn hiển thị lỗi đó. Tại sao??

Cũng đã thử truy cập nó như thế subcomponentRef?.value?.open()nhưng tôi nhận được lỗi này Property 'open' does not exist on type 'never'..

Cũng đã thử thêm một xác nhận Không rỗng , giống như confirmation.value!.open();và nhận được cùng một lỗi Property 'open' does not exist on type 'never'..

Bất kỳ ý tưởng có gì sai ở đây? hoặc có thể thay vì sử dụng ref(null), tôi nên xác định trước nó với thành phần thực tế? nhưng tôi không biết làm thế nào để làm điều đó một cách chính xác, không thể tìm thấy trong tài liệu.

Answer 1

Câu hỏi tuyệt vời! Tôi đã gặp vấn đề tương tự như bạn và tình cờ nhận được câu trả lời này . Điều làm việc hiệu quả với tôi là xác định hình dạng của đối tượng (giao diện kiểu chữ), vì vậy TS biết cái gì ở đó và cái gì không.

Áp dụng kiến ​​thức này vào ví dụ của bạn:

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

Trở thành:

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

Lỗi TS hiện đã biến mất vì:

• Typecript biết chức năng opencó sẵn trên subcomponentRefvì chúng tôi đã khai báo trước
• Với chuỗi tùy chọn, chúng tôi nói với Typescript không cần xem xét thêm khi nào subcomponentRef.valuelà nullhoặc undefined.

Thông thường những giao diện này đã được cung cấp sẵn ở đâu đó và không cần phải tạo thủ công. Vì vậy, trong trường hợp của tôi, tôi chỉ cần sử dụng QInputgiao diện từ quasarđể tránh lỗi TS resetValidationkhông khả dụng:

import { QInput } from 'quasar'

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

Tôi hy vọng điều này sẽ giúp làm sáng tỏ mọi thứ và tránh những lỗi khó chịu này.

Answer 2

Bạn nên sử dụng loại thành phần using typeof yourComponenthoặc nullsau đó sử dụng ?để truy cập các phương thức / thuộc tính:

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