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の型にまつわるものがほとんどといえます。具体的には、以下が新機能リストです。
- Props型定義とEmits型定義のインポート
- 新しいEmits定義
- defineModel()[実験的段階]
- Propsのデフォルト値[実験的段階]
- ジェネリクスコンポーネント
- defineSlots()
- defineOptions()
- toValue()
前編である今回は、このうち、1〜4を、次節以降、順に紹介していきます。5以降については、後編で紹介します。