Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【TSKaigi2025】 集合論と構造的型制約で理解する中級へのステップ
Search
tochikawa
May 24, 2025
1
2.3k
【TSKaigi2025】 集合論と構造的型制約で理解する中級へのステップ
TSkaigi2025で登壇した際の資料です
tochikawa
May 24, 2025
Tweet
Share
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Code Review Best Practice
trishagee
69
19k
Designing for humans not robots
tammielis
253
25k
Become a Pro
speakerdeck
PRO
29
5.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A better future with KSS
kneath
238
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
2025 © PLEX, inc 1 ~型推論の扉を開く ~ 集合論と構造的型制約で 理解する中級へのステップ
2025 © PLEX, inc 2 いきなりですが ..... 正直TypeScriptを学び始めたとき、 型めっちゃ簡単じゃん!(笑)
2025 © PLEX, inc 3 とある入門書には... ・文字列の変数には、 string型を割り当てます ・数値の変数には、number型を割り当てます と書いてある
いきなりですが ..... 当時の私 型って変数につける単なるラベル でしょ? 楽勝じゃん!
2025 © PLEX, inc 4 TypeScript完全に理解した(笑) いきなりですが ..... 恐ろしいことに、これだけの理解でそれっぽく業務をこなせてしまっていた....
2025 © PLEX, inc 5 いきなりですが ..... ある日こんな型推論をみた
2025 © PLEX, inc 6 いきなりですが ..... & => ちょっとわかる気もするけど
....笑 Human型 Robot型 Cyborg型
2025 © PLEX, inc 7 いきなりですが ..... 当時の自分の理解では、Cyborg型はnever型になりそうと思った どうやら型同士を合わせると、 「足し算」のような挙動になったり、「掛け算」のような挙動なる....?
足し算っぽい動き 掛け算っぽい動き
2025 © PLEX, inc 8 いきなりですが ..... TypeScriptなんもわからん(涙) 今日は、そんな自分が型を「集合」で捉えたことでちょっと世界が広がった話をします
2025 © PLEX, inc 9 前提として 型の区別や判定に関しては2つのアプローチがある💡 参考: サバイバルTypeScript ・型同士が同一かどうかを判断する際に、
その型の名前が重要な役割を果たします ・JavaやC#で採用されている 名称的型付け ・型の名前ではなく、その構造に着目して型の区別や互換性を判定する ・TypeScriptはこっち 構造的型付け
2025 © PLEX, inc 10 前提として 例: 構造的型付けの例
2025 © PLEX, inc 11 前提として getAnimalNameが期待する「構造」をHuman型も持っているためエラーとはならない 例: 構造的型付けの例
2025 © PLEX, inc 12 前提として getAnimalNameが期待する「構造」をHuman型も持っているためエラーとはならない 例: 構造的型付けの例
2025 © PLEX, inc 13 前提として 「Animal型のとりうる値」の範囲と「 Human型のとりうる範囲」を集合として表現するなら、 Animal型はHuman型を内包していると言える Animal型
Human型
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公式ドキュメント
2025 © PLEX, inc 15 具体例 冒頭に出した例を改めて集合論を用いて考えてみよう💡
2025 © PLEX, inc 16 具体例 Robot型 Cyborg型 ① Robot型はCyborg型を内包していることは明らか
Animal型 ⊇ Human型と同様に考えると ....
2025 © PLEX, inc 17 具体例 Robot型 Cyborg型 ① Robot型はCyborg型を内包していることは明らか
Animal型 ⊇ Human型と同様に考えると ....
2025 © PLEX, inc 18 ② Human型はCyborg型を内包していることは明らか 具体例 Human型 Cyborg型
Animal型 ⊇ Human型と同様に考えると ....
2025 © PLEX, inc 19 ② Human型はCyborg型を内包していることは明らか 具体例 Human型 Cyborg型
Animal型 ⊇ Human型と同様に考えると ....
2025 © PLEX, inc 20 具体例 ① Robot型はCyborg型を内包していることは明らか ② Human型はCyborg型を内包していることは明らか
整理 Robot型 Human型 Cyborg型
2025 © PLEX, inc 21 具体例 ① Robot型はCyborg型を内包していることは明らか ② Human型はCyborg型を内包していることは明らか
整理 Cyborg型は、Robot型とHuman型の両方の構造を持つ型となるのは当然
2025 © PLEX, inc 22 たしかに型は集合論で捉えられそう! 疑問
2025 © PLEX, inc 23 疑問 でも、集合論はどう役立つの?
2025 © PLEX, inc 24 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型のそれぞれの 違いやユースケースを理解できなかったり説明できない なぜなら、型をただのラベルとして捉えていたので暗記しようとしていた
初心者(私)あるある
2025 © PLEX, inc 25 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる string型
number型
2025 © PLEX, inc 26 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる string型
number型 全ての値を受け入れるので一番大きい集合 any型
2025 © PLEX, inc 27 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる any型
string型 unknown型 全ての値を受け入れるので一番大きい集合 型アサーションなどが必要だが.... any型以外を内包する集合 number型
2025 © PLEX, inc 28 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる any型
string型 never型 unknown型 全ての値を受け入れるので一番大きい集合 型アサーションなどが必要だが.... any以外を内包する集合 どんな値も受け入れない空集合 number型
2025 © PLEX, inc 29 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えると めちゃくちゃ分かりやすくなる any型
string型 number型 never型 unknown型 全ての値を受け入れるので一番大きい集合 型アサーションなどが必要だが.... any以外を内包する集合 どんな値も受け入れない空集合 直感的に型を捉えられるので、新しい知識の吸収がしやすい 💡
2025 © PLEX, inc 30 役立つポイント②: 型エラーの理由が瞬時にわかる 一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる💡
2025 © PLEX, inc 31 役立つポイント②: 型エラーの理由が瞬時にわかる 一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる💡 「is not
assignable….」というエラーがでます。
2025 © PLEX, inc 32 役立つポイント②: 型エラーの理由が瞬時にわかる 一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる tupple(タプル型)は list(numberのArray型)を内包してないので
tuppleにlistを割り当てることが不可能であることは集合で捉えると すぐにわかります number[] [number, number]
2025 © PLEX, inc 33 まとめ
2025 © PLEX, inc 34 まとめ 集合論サイコー #TSKaigi #集合論サイコー で呟いてね!
2025 © PLEX, inc 35 最後に がちで学びたい人におすすめの教材 詳細: Xの投稿
2025 © PLEX, inc 36 とちかわ こうすけ 経歴: https://dev.plex.co.jp 株式会社プレックス 最後に
2025 © PLEX, inc 37 最後に ノンエクイティの創業7期で売上60億円 & 7年連続増収増益を実現した株式会社プレックスでは 実践的長期インターン募集してます!興味ある方はこの後声かけてください
💡 圧倒的成長 企業です ! 複数プロダクト 展開 起業・ CTO経験者など 多数在籍
2025 © PLEX, inc 38 最後に https://product.plex.co.jp TypeScript以外も知りたい型におすすめブログ
2025 © PLEX, inc 39 最後に ご清聴ありがとうございました (インターン生お待ちしてます笑)