kahirokunn

株式会社iCAREで技術顧問をしているエンジニアです。

Vue3で凄くパワーアップしたTypeScriptに日々感動しています.

確認環境 VSCode + Vetur@0.30.3

Vueファイルの中の型
Vueファイルから見た他のVueファイルの型
TSファイルから見たTSファイルに存在するVue Componentの型
TSファイルから見た他のVueファイルの型
emitの型について

今回は一般的なTypeScriptユーザー目線とその感想で
Vue3 + TypeScriptの体験と感想を纏めて行きます

以下がその視点です

今回のに利用したコードを置いてます

1. Vueファイルの中の型

veturのサポートがある場所

case 1

定義されていない項目をtemplate内で参照したらveturがエラーを教えてくれる？

case 2

Vue2正確な型がちゃんとtemplate内に伝搬している？

case 3

内部用のPropsの型がちゃんと内部で参照できる？

case 4

内部用のPropsの型がmethodsの中でもちゃんと参照できる？

case 5

内部用のPropsの型がcomputedの中でもちゃんと参照できる？

computedは戻り値の型の注釈を自分で付ける必要がある.

1. Vueファイルの中の型

完璧！

2. Vueファイルから見た他のVueファイルの型

veturのサポートがある場所

Vueファイルから見た

他のVueファイルの型

型がちゃんと参照できる

2. Vueファイルから見た他のVueファイルの型

完璧！

3. TSファイルから見たTSファイルに存在するVue Componentの型

型がちゃんと参照できる

3. TSファイルから見たTSファイルに存在するVue Componentの型

完璧！

4. TSファイルから見た他のVueファイルの型

VSCode上だと

型が失われてしまう

4. TSファイルから見た他のVueファイルの型

vue cliで作成したプロジェクトでbuildすると型検査はされている

4. TSファイルから見た

他のVueファイルの型

▲

emitする側は型安全, 購読側は未完成.
TS4.1でTemplate Literal Typesというのがリリースされたので、Vueの型安全に必要な最後のピースも揃っているので、遠すぎない内に対応されるかも?

5. emitの型

まとめ

既に凄く良くなっているのに

まだ伸びしろを残しておいてくれている！

どこまで進化していく！？

例えば、この後の発表でこうなるかも...!?

続く最後のLTを楽しんでください！

ご静聴ありがとうございました

おまけ

Vueのエコシステムの現時点の状況

[@vue/cli](https://www.npmjs.com/package/@vue/cli)
vue-cliでは既にvue2,vue3どちらでプロジェクトを作成するか選べる

[vue-loader@16.1.1](https://www.npmjs.com/package/vue-loader)
[vuex@4.0.0-rc.2](https://www.npmjs.com/package/vuex)
[vue-router@4.0.1](https://www.npmjs.com/package/vue-router)
[vee-validate@4.0.3](https://www.npmjs.com/package/vee-validate)
[vue-apollo-composable@4.0.0-alpha.12](https://www.npmjs.com/package/@vue/apollo-composable)

[vuetify](https://www.npmjs.com/package/vuetify)
VuetifyのロードマップではVuetify 3.0でVue3対応する予定です.
https://vuetifyjs.com/en/introduction/roadmap

[buefy](https://www.npmjs.com/package/buefy)
現在進行中
Issue: https://github.com/buefy/buefy/issues/2505

[nuxt](https://github.com/nuxt/nuxt.js/issues/5708#issuecomment-668555312)
現在進行中

[storybook](https://www.npmjs.com/package/storybook)
v6.2.0か、v6.3.0から使えるようになりそうな気がしています.

※2020年12月8日時点
Vue3対応待ちライブラリと時点でリリースされているバージョン番号
バージョン番号がないのは、Vue3対応がいつされるかわからないものです.