VueJS の型参照のプロビジョニング/インジェクション機能
<p>親コンポーネントから型付き ref を提供し、それを子コンポーネントに注入しようとしています。 </p>
<p>VueJS ドキュメントを理解したかどうかはわかりませんが、これが私が思いついたものです。 </p>
<pre class="brush:php;toolbar:false;">タイプ { Ref } を 'vue' からインポートします
'vue' からタイプ { InjectionKey } をインポートします
'@/types/DocumentSet' からタイプ DocumentSet をインポートします
const documentSet = Symbol() as InjectionKey<{
documentSet: Ref<DocumentSet>、
更新: () => 無効
}>>
デフォルトの documentSet</pre> をエクスポートします。
<p>したがって、タスクは型付きオブジェクト (私の場合は documentSet) とそれを更新する関数を提供することです。 </p>
<p>親コンポーネントには次のコードがあります: </p>
<pre class="brush:php;toolbar:false;">dsKey を '@/injectionKeys/documentSet' からインポートします
'@/types/DocumentSet' からタイプ DocumentSet をインポートします
...
const documentSet = ref(null)
Provide(dsKey, {
ドキュメントセット、
更新: () => console.log('更新')
})</pre>
<p>子コンポーネントには次のコードがあります: </p>
<pre class="brush:php;toolbar:false;">dsKey を '@/injectionKeys/documentSet' からインポートします
const ds = インジェクト(dsKey)
const documentSet = ds?.documentSet</pre>
<p>問題は、定型コードがたくさんあるので、何か間違ったことをしているように感じることです。たとえば、なぜ ds オブジェクトを次のようにリファクタリングする必要があるのか理解できません: </p>
<pre class="brush:php;toolbar:false;">const { documentSet } = ds</pre>
<p><code>ds?.documentSet</code> を記述する代わりにコードを短縮することは可能ですか。特に ds が存在するはずであると確信している場合 (ds がないと子コンポーネントをレンダリングできません)< ;/p>
<p><code>const { documentSet } = inject(dsKey)</code> と書くと、次のエラーが表示されます。 </p>
<p><code>TS2339: プロパティ 'documentSet' はタイプ '{ documentSet: Ref ;' 更新: () => 無効; } | 未定義 '.</code></p>
<p>このアイデアは、子コンポーネントの重複を排除したいためです。</p>
<pre class="brush:php;toolbar:false;"><DocumentSetInfo
:documentSet="ドキュメントセット"
/>
<ドキュメントセットメモ
:documentSet="ドキュメントセット"
/>
<ドキュメントセットプログラム
:documentSet="ドキュメントセット"
/>
<DocumentSetPetition
:documentSet="ドキュメントセット"
/>
<DocumentSetPassRequests
:documentSet="ドキュメントセット"
/>
<ドキュメントセットレポート
:documentSet="ドキュメントセット"
/>
<DocumentSet受付通知
:documentSet="ドキュメントセット"
/><
