Nuxt v3 にカルーセル コンポーネントを実装したいと考えています。このコンポーネントは項目のリストを受け取ります。このコンポーネントはロジックのみを実装し、スタイルや構造は実装しません。
これが私のコンポーネントです:
コンポーネント/tdx/carousel.vue
カルーセルのロジックはここでは重要ではありません。
親コンポーネントでは、次のようにコンポーネントを使用できます:
リーリーこれはうまくいきます。それ以外に私が欲しいのはタイピングです。 title と description のタイプは、もちろん任意です。carousel.vue の小道具では、項目のタイプは unknown[] であるためです。 。
汎用コンポーネントの作成方法を示したこの記事を見つけましたが、nuxt の自動インポート システムをいじる必要があるため、これは望ましくありません。
carousel.vue プロパティ内の特定の項目から型推論を実装するにはどうすればよいですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
更新日: 2023 年 5 月
Vue 3.3 以降、共通コンポーネントを正式にサポート.
共通パラメータを定義する必要があります。
リーリーcarousel.vueコンポーネントを変更して、タグのgenericプロパティを使用し、型ベースのdefinePropsを使用するように変換します。メソッドを使用して、ジェネリックスを正しく取得できるようにします。スロット上のプロパティがアイテム タイプに基づいて正しく推測されるようになりました。
2023年5月以前
- #RFC #436
以前のバージョンの VSCode/Volar では、Experimental フラグ を有効にする必要がありました。 tsconfig.json の experimentalRfc436
Volar の最近のバージョンではデフォルトで有効になっているため、これは必要ありません。オプションをvueCompilerOptionsで有効にする必要があります。リーリー