VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025

2025年5月23日(金) - 24日(土)開催、「TSKaigi2025」で登壇した開催された、弁護士ドットコム株式会社 クラウドサイン事業本部　フロントエンドエンジニア のツノが登壇した際の資料です。

セッションタイトル：VueUseから学ぶ実践TypeScript

https://2025.tskaigi.org/talks/2nofa11

■ 弁護士ドットコム株式会社プロダクト組織について
https://speakerdeck.com/bengo4com/introduction-for-creators

■ 採用情報はこちら
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム Creators’ blog
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATOR'S
https://x.com/bengo4_creators

Transcript

1. Bengo4.com, Inc. VueUse から学ぶ実践 TypeScript 2025.05.24 クラウドサイン事業本部 ツノ
2. Bengo4.com, Inc. 2 自己紹介 ツノ Tsuno フロントエンドエンジニア 弁護士ドットコム株式会社 クラウドサイン ＜ X（Twitter）アカウント ＞ @2nofa11
3. Bengo4.com, Inc. 3 LTの概要 推しライブラリの内部コードに 「こんなテクニックあるんだ！？」 という学びがあった。 このLTの 背景
4. Bengo4.com, Inc. 4 LTの概要 それをシェアしたい！ このLTの ⽬的
5. Bengo4.com, Inc. 5 Type Strong Contributor Strong 200+ functions VueUseについて 推しライブラリ Collection of Essential Vue Composition Utilities
6. useClipboard 6 説明用に一部のコードを省略・変更しています。 ex.01
7. Bengo4.com, Inc. 7 クリップボード操作を簡単に行うための コンポーザブル関数 useClipboard 関数紹介
8. Bengo4.com, Inc. 関数に渡す引数 によって戻り値のcopy関数の型が切り替わる ポイント 8 useClipboard 引数にsourceを指定した時 sourceを指定 引数なし
9. Bengo4.com, Inc. 9 ポイント 引数にsourceを指定しない時 sourceを指定しない ⚠型エラー 引数なし 関数に渡す引数 によって戻り値のcopy関数の型が切り替わる useClipboard
10. Bengo4.com, Inc. 型が切り替わる仕組みを見てみる 10 useClipboard
11. Bengo4.com, Inc. sourceがある → Return<true> 、 sourceがない → Return<false> 11 useClipboard シグネチャを利用し、引数の有無で戻り値の型を切り替える 〈 ① オーバーロード関数 〉 👉 sourceがある場合 sourceがない場合
12. Bengo4.com, Inc. useClipboard関数の引数にsource あり ・ なし かでcopy関数の型が変わる 12 useClipboard シグネチャの戻り値によって、型レベルで 条件分岐 sourceがある場合 sourceがない場合 〈 ② Conditional Types 〉
13. 13 説明用に一部のコードを省略・変更しています。 useChangeCase ex.02
14. Bengo4.com, Inc. 14 useChangeCase テキストケース （大文字小文字の形式）変更の コンポーザブル関数 関数紹介 任意の文字列 テキストケース
15. Bengo4.com, Inc. 15 useChangeCase 第二引数入力時のエディター補完：入力候補が文字列リテラルのユニオン型 第二引数の型 ChangeCaseType ポイント 入力候補 文字列リテラルの ユニオン型
16. Bengo4.com, Inc. 第二引数の型を どうやって生み出しているか 16 useChangeCase
17. Bengo4.com, Inc. 17 useChangeCase 5行だけ コードの全体像
18. Bengo4.com, Inc. 18 change-case に含まれている型を typeof で抽出 〈 ① 外部ライブラリの読込 〉 useChangeCase
19. Bengo4.com, Inc. 関数名をキーとした新しい型を作成 〈 ② Mapped Types 〉 useChangeCase 19
20. Bengo4.com, Inc. 20 関数名をキーとした新しい型を作成 〈 ② Mapped Types 〉 useChangeCase
21. Bengo4.com, Inc. 21 関数名をキーとした新しい型を作成 〈 ② Mapped Types 〉 useChangeCase
22. Bengo4.com, Inc. 22 型の条件分岐 リテラル型 or never に型定義 〈 ③ infer 〉 useChangeCase
23. Bengo4.com, Inc. 23 〈 ③ infer 〉 useChangeCase 型の条件分岐 リテラル型 or never に型定義
24. Bengo4.com, Inc. 24 〈 ③ infer 〉 useChangeCase 型の条件分岐 リテラル型 or never に型定義
25. Bengo4.com, Inc. 25 ChangeCaseKeysから文字列リテラルのユニオン型を作成 〈 ④ keyof 型演算子 〉 useChangeCase
26. Bengo4.com, Inc. 26 〈 ④ keyof 型演算子 〉 useChangeCase ChangeCaseKeysから文字列リテラルのユニオン型を作成
27. Bengo4.com, Inc. 27 〈 ④ keyof 型演算子 〉 useChangeCase ChangeCaseKeysから文字列リテラルのユニオン型を作成
28. Bengo4.com, Inc. 28 まとめ VueUseの実装からTypeScriptのテクニックを見てきました。 あなたもOSSのコードを読んでみると TypeScriptへの理解が深まるかもしれません！
29. Bengo4.com, Inc. 29 SpecialThanks Anthony Fu Creator of VueUse
30. Bengo4.com, Inc. ありがとうございました
31. Bengo4.com, Inc. 31 • VueUse • Patterns of VueUse • サバイバルTypeScript リファレンス