オブジェクトが「null」である可能性があります。ref（null）
私が見つけたドキュメントからVueComposition 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'.。
また、同じエラーのように、null以外のアサーションを追加しようconfirmation.value!.open();としましたProperty 'open' does not exist on type 'never'.。
ここで何が問題なのか考えてみませんか？または、を使用する代わりにref(null)、実際のコンポーネントで事前定義する必要がありますか？しかし、私はそれを正しく行う方法がわからず、ドキュメントで見つけることができません。
回答
素晴らしい質問です！私はあなたと同じ問題を抱えていて、この答えに出くわしました。私にとってうまくいったのは、オブジェクトの形状（typescriptインターフェイス）を定義することでした。そのため、TSは、何があり、何がないかを認識しています。
この知識をあなたの例に適用する：
setup() {
const subcomponentRef = ref(null)
subcomponentRef.value.open() // TS error here
}
になる：
setup() {
const subcomponentRef = ref<null | { open: () => null }>(null)
subcomponentRef.value?.open()
}
TSエラーは、次の理由でなくなりました。
- 活字体は、機能が知っている
open上で利用可能であるsubcomponentRef私たちがいるので、宣言それを先行 - で、オプションのチェーン我々は、さらに時に見ていない活字体を伝え
subcomponentRef.valueていますnullかundefined。
通常、これらのインターフェースはすでにどこかに提供されており、手動で作成する必要はありません。したがって、私の場合は、QInputからのインターフェイスを使用して、使用できないquasarというTSエラーを回避する必要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 };
}