Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。3PropsとEmitsに関する実験的な新機能v-modelを利用した子から親への通信defineModel()vite.config.tsへの追記が必要Propsのデフォルト値まとめPropsとEmitsに関する新機能まず、最初に紹介するのは、新機能リストの1と2、すなわち、PropsとEmitsに関する新機能です。Props型定義とEmits型定義のインポートVueのコンポーネント間連携であるPropsとEmitを利用する際、defineProps()とdefineEmits()マクロを利用します。その際、ジェネリクスとして、Propsならば個々のPropを型定義したものを、Emitならば関数の型定義を渡します。この型定義に関して、これまではリスト1のように、defineProps()やdefineEmits()を実行するコンポーネント内で定義したもの、つまり、ローカルな型定義である必要がありました。defineEmits<Emits>();これが、Vue3.3では、リスト2のように、別ファイルに記述した型定義をインポートして利用できるようになりました。これにより、PropsとEmitの型定義の再利用が可能となります。defineEmits<Emits>();[NOTE]マクロdefineProps()やdefineEmits()関数は、通常の関数とは違い、「マクロ」と呼ばれています。マクロとは、ソースコードがコンパイルされる際に別の関数などを生成することで、コンパイル後には存在しなくなる特殊な関数のことです。新しいEmits定義このようにインポートできるようになったマクロ用の型定義に関して、Emitについては、さらに新しい仕組みが導入されました。これまでは、リスト2のインターフェースEmitsのように、コールシグネチャを記述する必要がありました。Vue3.3では、このコールシグネチャももちろん利用できますが、新たな型定義が導入されました。これは、リスト3のようになります。number];};これまでのコールシグネチャでは引数eventのリテラル型としていたイベント名を、プロパティ名としたオブジェクトを定義します。そのプロパティの値として、これまでのコールシグネチャの第2引数以降として記述していた部分、すなわち、Emit関数の実行時に親コンポーネントにデータを渡すための引数定義をラベル付きタプルとして記述します。引数の不要なEmit定義の場合は、リスト4のように空の配列定義とします。[];};なお、このラベル付きタプルを利用した新しいEmitsの型定義については、インターフェースとして定義するとエラーとなります。そのため、リスト3やリスト4のように、typeキーワードを利用した型定義とします。[NOTE]ラベル付きタプル通常、TypeScriptのタプルは、以下のように配列の各要素に対してデータ型のみを定義します。number];この各要素のデータ型に、以下のように、さらに変数名のようにラベルをつけることができます。これを「ラベル付きタプル」といいます。number];インポートした型定義の拡張も可能このPropsやEmitsのマクロ用の型定義に関しては、インポートした型を拡張して利用することも、Vue3.3で可能となりました。リスト5のようなコードです。defineProps<Props>();リスト4との違いは、interfacesForMacros.tsからインポートしたインターフェースPropsをPropsOrgnとし、(2)でそのPropsOrgnを拡張したインターフェースPropsを定義し、(3)のnoteプロパティを追加しています。