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

by tochikawa

Slide 1

Slide 1 text

2025 © PLEX, inc 1 ~型推論の扉を開く ~ 集合論と構造的型制約で　理解する中級へのステップ

Slide 2

Slide 2 text

2025 © PLEX, inc 2 いきなりですが ..... 正直TypeScriptを学び始めたとき、型めっちゃ簡単じゃん！（笑）

Slide 3

Slide 3 text

2025 © PLEX, inc 3 とある入門書には... ・文字列の変数には、 string型を割り当てます・数値の変数には、number型を割り当てますと書いてあるいきなりですが ..... 当時の私型って変数につける単なるラベルでしょ？楽勝じゃん！

Slide 4

Slide 4 text

2025 © PLEX, inc 4 TypeScript完全に理解した（笑）いきなりですが ..... 恐ろしいことに、これだけの理解でそれっぽく業務をこなせてしまっていた....

Slide 5

Slide 5 text

2025 © PLEX, inc 5 いきなりですが ..... ある日こんな型推論をみた

Slide 6

Slide 6 text

2025 © PLEX, inc 6 いきなりですが ..... & => ちょっとわかる気もするけど ....笑 Human型 Robot型 Cyborg型

Slide 7

Slide 7 text

2025 © PLEX, inc 7 いきなりですが ..... 当時の自分の理解では、Cyborg型はnever型になりそうと思ったどうやら型同士を合わせると、「足し算」のような挙動になったり、「掛け算」のような挙動なる....? 足し算っぽい動き掛け算っぽい動き

Slide 8

Slide 8 text

2025 © PLEX, inc 8 いきなりですが ..... TypeScriptなんもわからん（涙）今日は、そんな自分が型を「集合」で捉えたことでちょっと世界が広がった話をします

Slide 9

Slide 9 text

2025 © PLEX, inc 9 前提として型の区別や判定に関しては2つのアプローチがある💡 参考: サバイバルTypeScript ・型同士が同一かどうかを判断する際に、その型の名前が重要な役割を果たします・JavaやC#で採用されている名称的型付け・型の名前ではなく、その構造に着目して型の区別や互換性を判定する・TypeScriptはこっち構造的型付け

Slide 10

Slide 10 text

2025 © PLEX, inc 10 前提として例: 構造的型付けの例

Slide 11

Slide 11 text

2025 © PLEX, inc 11 前提として getAnimalNameが期待する「構造」をHuman型も持っているためエラーとはならない例: 構造的型付けの例

Slide 12

Slide 12 text

2025 © PLEX, inc 12 前提として getAnimalNameが期待する「構造」をHuman型も持っているためエラーとはならない例: 構造的型付けの例

Slide 13

Slide 13 text

2025 © PLEX, inc 13 前提として「Animal型のとりうる値」の範囲と「 Human型のとりうる範囲」を集合として表現するなら、 Animal型はHuman型を内包していると言える Animal型 Human型

Slide 14

Slide 14 text

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公式ドキュメント

Slide 15

Slide 15 text

2025 © PLEX, inc 15 具体例冒頭に出した例を改めて集合論を用いて考えてみよう💡

Slide 16

Slide 16 text

2025 © PLEX, inc 16 具体例 Robot型 Cyborg型 ① Robot型はCyborg型を内包していることは明らか Animal型 ⊇ Human型と同様に考えると ....

Slide 17

Slide 17 text

2025 © PLEX, inc 17 具体例 Robot型 Cyborg型 ① Robot型はCyborg型を内包していることは明らか Animal型 ⊇ Human型と同様に考えると ....

Slide 18

Slide 18 text

2025 © PLEX, inc 18 ② Human型はCyborg型を内包していることは明らか具体例 Human型 Cyborg型 Animal型 ⊇ Human型と同様に考えると ....

Slide 19

Slide 19 text

2025 © PLEX, inc 19 ② Human型はCyborg型を内包していることは明らか具体例 Human型 Cyborg型 Animal型 ⊇ Human型と同様に考えると ....

Slide 20

Slide 20 text

2025 © PLEX, inc 20 具体例 ① Robot型はCyborg型を内包していることは明らか ② Human型はCyborg型を内包していることは明らか整理 Robot型 Human型 Cyborg型

Slide 21

Slide 21 text

2025 © PLEX, inc 21 具体例 ① Robot型はCyborg型を内包していることは明らか ② Human型はCyborg型を内包していることは明らか整理 Cyborg型は、Robot型とHuman型の両方の構造を持つ型となるのは当然

Slide 22

Slide 22 text

2025 © PLEX, inc 22 たしかに型は集合論で捉えられそう！疑問

Slide 23

Slide 23 text

2025 © PLEX, inc 23 疑問でも、集合論はどう役立つの？

Slide 24

Slide 24 text

2025 © PLEX, inc 24 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型のそれぞれの違いやユースケースを理解できなかったり説明できないなぜなら、型をただのラベルとして捉えていたので暗記しようとしていた初心者（私）あるある

Slide 25

Slide 25 text

2025 © PLEX, inc 25 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えるとめちゃくちゃ分かりやすくなる string型 number型

Slide 26

Slide 26 text

2025 © PLEX, inc 26 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えるとめちゃくちゃ分かりやすくなる string型 number型　全ての値を受け入れるので一番大きい集合 any型

Slide 27

Slide 27 text

2025 © PLEX, inc 27 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えるとめちゃくちゃ分かりやすくなる any型 string型 unknown型　全ての値を受け入れるので一番大きい集合型アサーションなどが必要だが.... any型以外を内包する集合 number型

Slide 28

Slide 28 text

2025 © PLEX, inc 28 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えるとめちゃくちゃ分かりやすくなる any型 string型 never型 unknown型　全ての値を受け入れるので一番大きい集合型アサーションなどが必要だが.... any以外を内包する集合どんな値も受け入れない空集合 number型

Slide 29

Slide 29 text

2025 © PLEX, inc 29 役立つポイント①: 知識の吸収しやすくなるかも any型・unknown型・never型を集合論で置き換えるとめちゃくちゃ分かりやすくなる any型 string型 number型 never型 unknown型　全ての値を受け入れるので一番大きい集合型アサーションなどが必要だが.... any以外を内包する集合どんな値も受け入れない空集合直感的に型を捉えられるので、新しい知識の吸収がしやすい 💡

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

2025 © PLEX, inc 32 役立つポイント②: 型エラーの理由が瞬時にわかる一見正しそうなコードのエラーもなぜエラーになるのかすぐにわかる tupple（タプル型）は list（numberのArray型）を内包してないので tuppleにlistを割り当てることが不可能であることは集合で捉えるとすぐにわかります number[] [number, number]

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

2025 © PLEX, inc 37 最後にノンエクイティの創業7期で売上60億円 & 7年連続増収増益を実現した株式会社プレックスでは実践的長期インターン募集してます！興味ある方はこの後声かけてください 💡 圧倒的成長企業です ! 複数プロダクト展開起業・ CTO経験者など多数在籍