【TSKaigi2025】 集合論と構造的型制約で理解する中級へのステップ

TSkaigi2025で登壇した際の資料です

Transcript

1. 2025 © PLEX, inc 1 ~型推論の扉を開く ~ 集合論と構造的型制約で 　理解する中級へのステップ
2. 2025 © PLEX, inc 2 いきなりですが ..... 正直TypeScriptを学び始めたとき、 型めっちゃ簡単じゃん！（笑）
3. 2025 © PLEX, inc 3 とある入門書には... ・文字列の変数には、 string型を割り当てます ・数値の変数には、number型を割り当てます と書いてある いきなりですが ..... 当時の私 型って変数につける単なるラベル でしょ？ 楽勝じゃん！
4. 2025 © PLEX, inc 4 TypeScript完全に理解した（笑） いきなりですが ..... 恐ろしいことに、これだけの理解でそれっぽく業務をこなせてしまっていた....
5. 2025 © PLEX, inc 5 いきなりですが ..... ある日こんな型推論をみた
6. 2025 © PLEX, inc 6 いきなりですが ..... & => ちょっとわかる気もするけど ....笑 Human型 Robot型 Cyborg型
7. 2025 © PLEX, inc 7 いきなりですが ..... 当時の自分の理解では、Cyborg型はnever型になりそうと思った どうやら型同士を合わせると、 「足し算」のような挙動になったり、「掛け算」のような挙動なる....? 足し算っぽい動き 掛け算っぽい動き
8. 2025 © PLEX, inc 8 いきなりですが ..... TypeScriptなんもわからん（涙） 今日は、そんな自分が型を「集合」で捉えたことでちょっと世界が広がった話をします
9. 2025 © PLEX, inc 9 前提として 型の区別や判定に関しては2つのアプローチがある💡 参考: サバイバルTypeScript ・型同士が同一かどうかを判断する際に、 その型の名前が重要な役割を果たします ・JavaやC#で採用されている 名称的型付け ・型の名前ではなく、その構造に着目して型の区別や互換性を判定する ・TypeScriptはこっち 構造的型付け
10. 2025 © PLEX, inc 10 前提として 例: 構造的型付けの例
11. 2025 © PLEX, inc 11 前提として getAnimalNameが期待する「構造」をHuman型も持っているためエラーとはならない 例: 構造的型付けの例
12. 2025 © PLEX, inc 12 前提として getAnimalNameが期待する「構造」をHuman型も持っているためエラーとはならない 例: 構造的型付けの例
13. 2025 © PLEX, inc 13 前提として 「Animal型のとりうる値」の範囲と「 Human型のとりうる範囲」を集合として表現するなら、 Animal型はHuman型を内包していると言える Animal型 Human型
14. 2025 © PLEX, inc 14 今日一番伝えたいこと 型は「値の集合」 つまり集合論として捉えることができる TypeScript provides a number of mechanisms to work with types in a set-theoretic way, and you’ll find them more intuitive if you think of types as sets. 引用: TypeScript公式ドキュメント
15. 2025 © PLEX, inc 15 具体例 冒頭に出した例を改めて集合論を用いて考えてみよう💡
16. 2025 © PLEX, inc 16 具体例 Robot型 Cyborg型 ① Robot型はCyborg型を内包していることは明らか Animal型 ⊇ Human型と同様に考えると ....
17. 2025 © PLEX, inc 17 具体例 Robot型 Cyborg型 ① Robot型はCyborg型を内包していることは明らか Animal型 ⊇ Human型と同様に考えると ....
18. 2025 © PLEX, inc 18 ② Human型はCyborg型を内包していることは明らか 具体例 Human型 Cyborg型 Animal型 ⊇ Human型と同様に考えると ....
19. 2025 © PLEX, inc 19 ② Human型はCyborg型を内包していることは明らか 具体例 Human型 Cyborg型 Animal型 ⊇ Human型と同様に考えると ....
20. 2025 © PLEX, inc 20 具体例 ① Robot型はCyborg型を内包していることは明らか ② Human型はCyborg型を内包していることは明らか 整理 Robot型 Human型 Cyborg型
21. 2025 © PLEX, inc 21 具体例 ① Robot型はCyborg型を内包していることは明らか ② Human型はCyborg型を内包していることは明らか 整理 Cyborg型は、Robot型とHuman型の両方の構造を持つ型となるのは当然
22. 2025 © PLEX, inc 22 たしかに型は集合論で捉えられそう！ 疑問
23. 2025 © PLEX, inc 23 疑問 でも、集合論はどう役立つの？
24. 2025 © PLEX, inc 24 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型のそれぞれの 違いやユースケースを理解できなかったり説明できない なぜなら、型をただのラベルとして捉えていたので暗記しようとしていた 初心者（私）あるある
25. 2025 © PLEX, inc 25 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる string型 number型
26. 2025 © PLEX, inc 26 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる string型 number型 　全ての値を受け入れるので一番大きい集合 any型
27. 2025 © PLEX, inc 27 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる any型 string型 unknown型 　全ての値を受け入れるので一番大きい集合 型アサーションなどが必要だが.... any型以外を内包する集合 number型
28. 2025 © PLEX, inc 28 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる any型 string型 never型 unknown型 　全ての値を受け入れるので一番大きい集合 型アサーションなどが必要だが.... any以外を内包する集合 どんな値も受け入れない空集合 number型
29. 2025 © PLEX, inc 29 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる any型 string型 number型 never型 unknown型 　全ての値を受け入れるので一番大きい集合 型アサーションなどが必要だが.... any以外を内包する集合 どんな値も受け入れない空集合 直感的に型を捉えられるので、新しい知識の吸収がしやすい 💡
30. 2025 © PLEX, inc 30 役立つポイント②: 型エラーの理由が瞬時にわかる 一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる💡
31. 2025 © PLEX, inc 31 役立つポイント②: 型エラーの理由が瞬時にわかる 一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる💡 「is not assignable….」というエラーがでます。
32. 2025 © PLEX, inc 32 役立つポイント②: 型エラーの理由が瞬時にわかる 一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる tupple（タプル型）は list（numberのArray型）を内包してないので tuppleにlistを割り当てることが不可能であることは集合で捉えると すぐにわかります number[] [number, number]
33. 2025 © PLEX, inc 33 まとめ
34. 2025 © PLEX, inc 34 まとめ 集合論サイコー #TSKaigi #集合論サイコー で呟いてね！
35. 2025 © PLEX, inc 35 最後に がちで学びたい人におすすめの教材 詳細: Xの投稿
36. 2025 © PLEX, inc 36 とちかわ　こうすけ 経歴: https://dev.plex.co.jp 株式会社プレックス 最後に
37. 2025 © PLEX, inc 37 最後に ノンエクイティの創業7期で売上60億円 & 7年連続増収増益を実現した株式会社プレックスでは 実践的長期インターン募集してます！興味ある方はこの後声かけてください 💡 圧倒的成長 企業です ! 複数プロダクト 展開 起業・ CTO経験者など 多数在籍
38. 2025 © PLEX, inc 38 最後に https://product.plex.co.jp TypeScript以外も知りたい型におすすめブログ
39. 2025 © PLEX, inc 39 最後に ご清聴ありがとうございました （インターン生お待ちしてます笑）