TypeScriptのサポートが強化されたVue3.3の新機能とは？──PropsとEmitsに関する新機能を解説【前編】

TypeScriptのサポートがアップデート！ Vue3.3の新機能まとめ　前編

　Vue3、すなわち、Vue.jsのバージョン3がリリースされたのが3年前の2020年9月です。そのVue3が、Vueプロジェクトのデフォルトになったのが、2022年2月です。その時点でのVue本体のバージョンは3.2です。それから1年以上が経過した2023年5月11日に、Vue3.3がリリースされました。本稿では、前編と後編の2回にわたって、このVue3.3での新機能をまとめて紹介します。前編である今回は、PropsとEmitsに関する新機能を紹介します。

TypeScriptとの親和性を高めるアップデート

　Vue3.3によって導入された新機能を紹介する前に、このアップデートの趣旨をまず紹介しておこうと思います。

Vue3.3アップデートの趣旨

　Vue.jsの開発者であるEvan Youによると、3.3にアップデートを行うにあたって、その一番中心に据えたのが、TypeScriptによるコーディング環境をよりよいものにすること、だそうです。

　Vue.jsが、そのバージョン2から3に大幅アップデートする際、その内部コードを全てTypeScriptで書き換えました。これは、もちろん、Vueを利用したコーディングにおいてTypeScriptの利用を強要するものではありません。

　しかし、一方で、もし、TypeScriptでコーディングを行おうとするならば、よりスムーズに、より心地よくコーディングできる必要があるし、それを妨げるものがあるならば、それは、Vue.js開発者チームの責任である、とEvan Youは考えたそうです。

　そこで、まず、VS CodeのVue用プラグインである、Volarの機能強化を図りました。型チェックをより適切に行うように、事前にコーディングミスを指摘できるように、と改造を行ってきたそうです。

　それでも不十分な部分が多々あり、それを改善するためには、Vue.js本体を、よりTypeScriptとの親和性を高めるようにアップデートする必要があります。これが、Vue3.3のアップデートの一番中心に据えられた課題です。

Vue3.3アップデートの内容

　このような趣旨で行われた3.3へのアップデートのため、その内容は、主にTypeScriptの型にまつわるものがほとんどといえます。具体的には、以下が新機能リストです。

1. Props型定義とEmits型定義のインポート
2. 新しいEmits定義
3. defineModel()[実験的段階]
4. Propsのデフォルト値[実験的段階]
5. ジェネリクスコンポーネント
6. defineSlots()
7. defineOptions()
8. toValue()

　前編である今回は、このうち、1〜4を、次節以降、順に紹介していきます。5以降については、後編で紹介します。