kahirokunn

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

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

確認環境 VSCode + Vetur@0.30.3

  1. Vueファイルの中の型
  2. Vueファイルから見た他のVueファイルの型
  3. TSファイルから見たTSファイルに存在するVue Componentの型
  4. TSファイルから見た他のVueファイルの型
  5. 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対応がいつされるかわからないものです.
Made with Slides.com