개체가 'null'일 수 있습니다. ref (null)에

Nov 26 2020

내가 찾은 문서에서 Vue Composition API (및 TypeScript) 학습, ref(null)내부에있는 하위 구성 요소에서 사용하는 데 사용해야합니다 <template>...</template>.

이 하위 구성 요소에는와 같은 메서드가 open()있으며 다음과 같이 액세스합니다.

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

이것은 내가 Object is possibly 'null'.가리키는 오류를 표시 할 수 subcomponentRef.value있지만 이상한 점은 조건을 추가하더라도 if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }여전히 오류를 표시한다는 것입니다. 왜??

또한 액세스를 시도했지만 subcomponentRef?.value?.open()이 오류가 발생 Property 'open' does not exist on type 'never'.합니다.

또한 추가하는 시도 비 널 주장 처럼 confirmation.value!.open();와 같은 오류를 수신한다 Property 'open' does not exist on type 'never'..

여기서 무엇이 잘못되었는지 아십니까? 또는을 사용하는 대신 ref(null)실제 구성 요소로 미리 정의해야합니까? 그러나 나는 그것을 올바르게하는 방법을 모르고 문서에서 찾을 수 없습니다.

답변

1 DarkLite1 Dec 02 2020 at 10:44

좋은 질문입니다! 나는 당신과 같은 문제가 있었고이 대답을 우연히 발견했습니다 . 나를 위해 일한 것은 객체의 모양 (타이프 스크립트 인터페이스)을 정의하는 것이었기 때문에 TS는 무엇이 있고 무엇이 없는지 알고 있습니다.

이 지식을 예제에 적용 :

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

된다 :

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

TS 오류는 이제 다음과 같은 이유로 사라졌습니다.

  • Typescript는 미리 선언 했기 때문에 함수 open를 사용할 수 있음을 알고 있습니다.subcomponentRef
  • 선택적 체이닝 을 사용하면 Typescript에 subcomponentRef.valuenull또는 일 때 더 이상 보지 않도록 지시 undefined합니다.

일반적으로 이러한 인터페이스는 이미 어딘가에 제공되며 수동으로 만들 필요가 없습니다. 그래서 제 경우 에는 TS 오류를 사용할 수 없다는 것을 피하기 위해 QInput인터페이스 를 사용해야했습니다 .quasarresetValidation

import { QInput } from 'quasar'

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

이것이 문제를 해결하고 이러한 불쾌한 오류를 피하는 데 도움이되기를 바랍니다.

BoussadjraBrahim Nov 26 2020 at 19:10

다음을 사용 하여 구성 요소 유형을 사용 typeof yourComponent하거나 null다음을 사용 ?하여 메서드 / 속성에 액세스해야합니다.

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