<p>Typescript、Ponia、Vue3 を使用しており、<code>MenuButton</code> コンポーネントがあり、メニューを開いている状態と表示するアクションに対して Ponia のストレージ/非表示を渡すことができるようにしたいと考えています。 。アプリケーションにはいくつかの異なるメニューがあるため、それらを渡して、すべて同じファクトリーを使用してストアを定義できるようにしたいと考えています。これらすべてを typescript で動作させる方法を見つけようとしています。 </p> <pre class="lang-js prettyprint-override"><code>// nav.store.ts import {defineStore} から "pinia"; import { useStorage } から "@vueuse/core"; タイプ { RemovableRef } を "@vueuse/core" からインポートします。 エクスポートインターフェイス MenuStore { isOpen: RemovableRef<boolean>, トグル(力?: ブール値) : void, open(): 無効、 close(): 無効、 } インターフェイスの状態 { isOpen: RemovableRef<boolean>; } 関数 menuStoreFactory(id: 文字列) { returndefineStore(id, { 状態: () : 状態 => ({ isOpen: useStorage(`${id}-open`, false), })、 行動： { トグル(力?: ブール値) { this.isOpen = 強制 != 未定義 ? 強​​制 : !this.isOpen; }、 開ける（） { this.isOpen = true; }、 近い（） { this.isOpen = false; } } }); } エクスポート const useMainMenuStore = menuStoreFactory('mainMenu'); import const useMobileMenuStore = menuStoreFactory('mobileMenu'); </code></pre> <pre class="lang-js prettyprint-override"><code>// メニュー ボタン コンポーネントのセットアップ スクリプト import { MenuIcon, MenuLeftIcon } from "@/icons"; import type { MenuStore } from "@/modules/nav/nav.store"; インターフェイスの小道具 { コントローラ: メニューストア } const props =defineProps<Props>(); </code></pre> <p>使用方法は非常に簡単です。</p> <pre class="lang-html prettyprint-override"><コード><テンプレート> <メニューボタン :controller="メインメニュー" ></メニューボタン> </テンプレート> <スクリプト設定 lang=ts"> const mainMenu = useMainMenuStore(); </スクリプト> </code></pre> <p>現在のインターフェースでは、プロパティの不一致エラーが発生します。いくつかの調査の後、インターフェイスを次のように変更し、使用上のエラーを修正しましたが、<code>MenuButton</code> コンポーネントで <code>toggle()</code> と < をスローしました。 code>isOpen< の /code> は解決されていません。</p> <pre class="lang-js prettyprint-override"><code>エクスポート インターフェイス MenuStore extends PoniaCustomStateProperties<{ isOpen: RemovableRef<boolean>, トグル(力?: ブール値) : void, open(): 無効、 close(): 無効、 }>> {} </code></pre> <p>もう一つの接近の説明は次のとおりです：</p> <pre class="lang-js prettyprint-override"><code>エクスポート インターフェイス MenuStore extends Store<string, { isOpen: RemovableRef<boolean>, トグル(力?: ブール値) : void, open(): 無効、 close(): 無効、 }>> {} </code></pre> <p>これにより、使用時にこのような問題が発生しますが、コンポーネントには問題はありません</p> <pre class="brush:php;toolbar:false;">Type _StoreWithState<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void} > & UnwrapRef<State> & _StoreWithGetters<{}> & {toggle(force?: boolean): void, close(): void, open(): void} & PoniaCustomProperties<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void}> & PoniaCustomStateProperties<State>は、MenuStore タイプに割り当てることはできません ... PoniaCustomStateProperties<State> と入力します。タイプ MenuStore</pre></p> には割り当てられません。