集合で理解する Typescript

Transcript

1. 集合で理解する Typescript
2. 職業 フロントエンドエンジニア（2020/11 ~） React、Typescript メインでやってます 自己紹介 韓国人です。大学時代にはげしくアニメ オタクをやってて日本語が上手くなりま した。
3. CONTENTS 1. 型は値の集合 2. 和集合と共通部分 3. never, unknown, any 4. オブジェクトの共通部分 5. オブジェクトの和集合 6. まとめ
4. 1. 型は値の集合
5. 「型」は値の集合 変数には色んな種類の値を割り当てることができ、型を持つ
6. 「型」は値の集合 型は割り当てることができる値の集合である 例）すべての数値の集合は number 型
7. 「型」は値の集合 10 は number 型の要素で、’10’ は number 型の要素ではない 「assignable」=「割り当てられる」 ：集合の観点では「〜の要素である」もしくは「〜の部分集合である」という意味
8. 型チェックとは部分集合であるかどうかを見る
9. 型チェックとは部分集合であるかどうかを見る
10. 2. 和集合と共通部分
11. 和集合（Union） 二つの集合を「くっつけ」て一緒にしてしまうことで新しい集合を取り出すことができる。 Image From https://ja.wikipedia.org/wiki/%E9%9B%86%E5%90%88
12. 「型」の和集合（Union）
13. 上位集合と部分集合の和集合は上位集合
14. 上位集合と部分集合の和集合は上位集合
15. 共通部分（Intersection） Image From https://ja.wikipedia.org/wiki/%E9%9B%86%E5%90%88 二つの集合の共通した部分を見つけることで、新しい集合を取り出すことができる。
16. 「型」の共通部分（Intersection）
17. 上位集合と部分集合の共通部分は部分集合
18. 上位集合と部分集合の共通部分は部分集合
19. 3. never, unknown, any
20. never : 空集合 どういう要素も部分集合持たない集合
21. never : 空集合 数字の世界でゼロが無の量を表すように、型の世界でも不可能を表す型が必要
22. unknown : すべての集合の上位集合 (1番大きい集合)
23. any : すべての集合の上位集合であり、すべての型の部分集合でもある
24. any : すべての集合の上位集合であり、すべての型の部分集合でもある ＊never は例外 (Typescript 世界観の破壊者...)
25. 補足1) unknown は部分集合になれない ＊any の部分集合にはなれる（any は破壊者だから、、）
26. 補足2) any と unknown って具体的にどう違う？ any: 何でもありなんで型チェックなんか要らん unknown: 何の型が来るかわからんから、ちゃんと型確認しろよ 型チェックを放棄 型が分からないので、string 型にだけ 存在するメソッドを使ったらエラー発生 型ガードで型を絞ったらエラー解消
27. 4. オブジェクトの共通部分
28. オブジェクトの共通部分 (Intersection) 共通部分なのになんかプロパティ増えてる？
29. 少しだけ Javascript の話をしましょう
30. Javascript は Duck Typing に基づいてる In computer programming, duck typing is an application of the duck test —"If it walks like a duck and it quacks like a duck, then it must be a duck"— to determine whether an object can be used for a particular purpose. コンピュータ・プログラミングでは、Duck Typing はダック・テストの応用である。 「アヒルのように歩き、アヒルのように鳴くなら、それはアヒルに違いない」 あるオブジェクトが特定の目的に使用できるかどうかを判断する。 Duck Typing とは
31. プラグを挿せる２つの穴があるなら、それはきっとコンセントだ(ｗ) 

32. One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural typing”. In a structural type system, if two objects have the same shape, they are considered to be of the same type. Typescript における Duck Typing
33. Typescript における Duck Typing ある型の形を満たすオブジェクトはその型に割り当てることができる
34. ではオブジェクトの和集合にもどって、、
36. name: string プロパティを もつ(すべての)オブジェクト birth: Date、 death?: Date プロパティをもつ (すべての)オブジェクト name: string、birth: Date、 death?: Date のプロパティをもつ(すべての)オブジェクト
37. 補足）ある型の形を満たすオブジェクトはその型に割り当てることができる
38. これの理由が知りたい方は以下の記事をぜひお読みください 補足）でもオブジェクトリテラルの場合は違う https://zenn.dev/luvmini511/articles/2cd39b6cffa08c
39. 5. オブジェクトの和集合
40. オブジェクトの和集合（Union） 和集合なのになんかアクセスできるプロパティ減ってる？
41. Image From https://ja.wikipedia.org/wiki/%E9%9B%86%E5%90%88 和集合（Union）をもう一度考える A B AとBの和集合ということは、Aの部分集合かもしれないしBの部分集合かもしれない
42. Typescript の気持ちを考える 「この時点だと Product が OrderMade のほうなのか ReadyMade のほうなのかわからない、、 なら共通してるプロパティだけアクセスさせたほうが安全だ！」
43. プロパティにアクセスするためには型ガードが必要 product に store というプロパティがある場合、 アクセスするように型ガードする
44. 判別可能なユニオン型のほうが便利 このスコープの product は OrderMade 型になる このスコープの product は ReadyMade 型になる ＊型を識別するためのプロパティを持つ オブジェクトのユニオンを Discriminated Union、 または Tagged Union という
45. 6. まとめ
46. - 「型」は割り当てられる値の集合でる - Union は和集合、Intersection は共通部分を表現する - never は空集合 - unknown はすべての集合の上位集合 (1番大きい集合) - any はすべての集合の上位集合であり、never 以外のすべての型の部分集合でもある - Javascript は Duck Typing に基づいてるので、オブジェクトの Intersection はプロパティが増える - オブジェクトの Union では識別可能なユニオンが便利 - any 使わないでお願い
47. ご清聴ありがとうございました
48. - Dan Vanderkam, 『Effective TypeScript』, O'Reilly, 2021 - typescript, 「Structural Type System」, https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#structural-ty pe-system (2024.05.19) - wikipedia, 「Duck typing」, https://en.wikipedia.org/wiki/Duck_typing, (2024.05.19) - wikipedia, 「集合」,https://ja.wikipedia.org/wiki/%E9%9B%86%E5%90%88, (2024.05.19) - zhenghao.io, 「typescript never」, https://www.zhenghao.io/posts/ts-never (2024.06.01) - typescriptbook, 「判別可能なユニオン型」, https://typescriptbook.jp/reference/values-types-variables/discriminated-union (2024.06.01) 参考資料