genericで強力な型が付いたコンポーネントを作ろう

こちらで発表したものです。初LTでした。
https://optim.connpass.com/event/330716/

Transcript

1. genericで強力な型が付いたコ ンポーネントを作ろう お窓
2. 自己紹介 お窓 Vue3を書く3年目フロントエンドエンジニア Twitter (𝕏) @shallow_omado お仕事 ネットショップSaaS管理画面のフロントエンド開発 推し事 ご注文はうさぎですか ? の 香風智乃(かふうちの) を推します 趣味 ニコニコ動画で日常系アニメを見たり とあるゲームのAPIを開発したり 2
3. 3 Vuetify3 の VSelect コンポーネント のラッパーに強力な型定義を付けたお話 話す内容
4. 4 VSelectコンポーネントとは 選択肢から 1つ(または複数 )要素を選べるコンポーネント
5. 5 VSelectコンポーネントの悲しいところ 型の絞り込みが完全じゃない 😥 Vuetify 公式サイト https://vuetifyjs.com/ja/components/selects/
6. 6 VSelectコンポーネントを普通に使ってみる model-valueに渡したのと 同じ型がupdate:model-valueに返る
7. 7 VSelectコンポーネントを普通に使ってみる itemsと噛み合わない型の ref値も渡せてしまう
8. 8 VSelectコンポーネントを普通に使ってみる itemsと噛み合わない item-titleやitem-valueを渡せてしまう
9. 9 もっと厳密な型を作りたい (既にデザインカスタマイズのために VSelectのラップコンポーネントがあるので) 型定義を上手い具合に改善できないものか ... 🤔
10. https://azukiazusa.dev/blog/vue-generic-component/ 10 解決策となりそうな記事 👀
11. https://azukiazusa.dev/blog/vue-generic-component/ 11 解決策となりそうな記事 👀
12. 12 実際にやってみる
13. 13 実際にやってみる
14. 14 できたもの
15. 15 できたもの
16. 16 書いた感想 - ラッパーが無い環境であれば VSelectデフォルトの型でも 問題ないかも? (ドキュメント通りのanyだと勘違いしていた) - withDefaultsとの相性は悪そう 型エラーを回避する方法を模索するも見つからず断念
17. 17 今後の展望 - VSelect以外にも VComboboxやVRadioGroup、VIcon等 のラッパーを作ると 型定義を強化できそう - genericsを大量に定義するとLinter負荷が心配 型パフォーマンスを計測する方法があれば計測したい - VSelectは本来テキスト配列も受け取る可能性がある その型もなんとか表現したい
18. 18 まとめ ・VSelectの items や update:modelValueの 　型定義は不完全なところがある ・VSelectをラップするコンポーネントがあったので 　genericsを使って型定義を強化した ・型定義がビシバシ効いてRef指定ミスが起こりづらくなった✨
19. 関連資料 - Vue.js でジェネリックコンポーネントを使う - https://azukiazusa.dev/blog/vue-generic-component/ - 【Vue3】ジェネリクスコンポーネント + Panda CSS を使ってコンポーネントを 作成してみる - https://zenn.dev/comm_vue_nuxt/articles/2fc54416899fcb 19