kahirokunn
twitter: https://twitter.com/kahirokunn
qiita: https://qiita.com/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の中でもちゃんと参照できる？
内部用の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対応がいつされるかわからないものです.
Vue Tokyo 12 LT
By kahirokunn
