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

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

自己紹介お窓 Vue3を書く3年目フロントエンドエンジニア Twitter (𝕏) @shallow_omado お仕事ネットショップSaaS管理画面のフロントエンド開発推し事ご注文はうさぎですか
? の香風智乃(かふうちの) を推します趣味ニコニコ動画で日常系アニメを見たりとあるゲームのAPIを開発したり 2

3 Vuetify3 の VSelect コンポーネントのラッパーに強力な型定義を付けたお話話す内容

4 VSelectコンポーネントとは選択肢から 1つ(または複数 )要素を選べるコンポーネント

5 VSelectコンポーネントの悲しいところ型の絞り込みが完全じゃない 😥 Vuetify 公式サイト https://vuetifyjs.com/ja/components/selects/

6 VSelectコンポーネントを普通に使ってみる model-valueに渡したのと同じ型がupdate:model-valueに返る

7 VSelectコンポーネントを普通に使ってみる itemsと噛み合わない型の ref値も渡せてしまう

8 VSelectコンポーネントを普通に使ってみる itemsと噛み合わない item-titleやitem-valueを渡せてしまう

9 もっと厳密な型を作りたい (既にデザインカスタマイズのために VSelectのラップコンポーネントがあるので) 型定義を上手い具合に改善できないものか ... 🤔

https://azukiazusa.dev/blog/vue-generic-component/ 10 解決策となりそうな記事 👀

https://azukiazusa.dev/blog/vue-generic-component/ 11 解決策となりそうな記事 👀

12 実際にやってみる

13 実際にやってみる

14 できたもの

15 できたもの

16 書いた感想 - ラッパーが無い環境であれば VSelectデフォルトの型でも問題ないかも? (ドキュメント通りのanyだと勘違いしていた) - withDefaultsとの相性は悪そう型エラーを回避する方法を模索するも見つからず断念

17 今後の展望 - VSelect以外にも VComboboxやVRadioGroup、VIcon等のラッパーを作ると型定義を強化できそう - genericsを大量に定義するとLinter負荷が心配型パフォーマンスを計測する方法があれば計測したい
- VSelectは本来テキスト配列も受け取る可能性があるその型もなんとか表現したい

18 まとめ・VSelectの items や update:modelValueの　型定義は不完全なところがある・VSelectをラップするコンポーネントがあったので　genericsを使って型定義を強化した・型定義がビシバシ効いてRef指定ミスが起こりづらくなった✨

関連資料 - Vue.js でジェネリックコンポーネントを使う - https://azukiazusa.dev/blog/vue-generic-component/ - 【Vue3】ジェネリクスコンポーネント + Panda
CSS を使ってコンポーネントを作成してみる - https://zenn.dev/comm_vue_nuxt/articles/2fc54416899fcb 19

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

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

お窓

Other Decks in Programming

Featured

Transcript