개체가 'null'일 수 있습니다. ref (null)에
내가 찾은 문서에서 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)
실제 구성 요소로 미리 정의해야합니까? 그러나 나는 그것을 올바르게하는 방법을 모르고 문서에서 찾을 수 없습니다.
답변
좋은 질문입니다! 나는 당신과 같은 문제가 있었고이 대답을 우연히 발견했습니다 . 나를 위해 일한 것은 객체의 모양 (타이프 스크립트 인터페이스)을 정의하는 것이었기 때문에 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.value
가null
또는 일 때 더 이상 보지 않도록 지시undefined
합니다.
일반적으로 이러한 인터페이스는 이미 어딘가에 제공되며 수동으로 만들 필요가 없습니다. 그래서 제 경우 에는 TS 오류를 사용할 수 없다는 것을 피하기 위해 QInput
인터페이스 를 사용해야했습니다 .quasar
resetValidation
import { QInput } from 'quasar'
const driverIdInput = ref<QInput>()
driverIdInput.value?.resetValidation()
이것이 문제를 해결하고 이러한 불쾌한 오류를 피하는 데 도움이되기를 바랍니다.
다음을 사용 하여 구성 요소 유형을 사용 typeof yourComponent
하거나 null
다음을 사용 ?
하여 메서드 / 속성에 액세스해야합니다.
setup() {
const subcomponentRef= ref < typeof subcomponent| null > (null);
subcomponentRef.value?.open();
return { subcomponentRef };
}